第一种方法使用slot="header"（使用的官方文档使用的方法，但是没有数据的联动，所以这里修改了一下）：
html：
<el-table :data="tableList" style="width: 100%" border> <el-table-column v-for="(header, hIndex) in tableHeader" :key="hIndex" :label="header.label" :prop="header.prop"> <template slot="header" slot-scope="{}"> // 官方文档这里是scope，但是下拉后无法刷新数据，换成{}就可以 <div class="table-header"> <div class="table-header-title">{{ header.label }}</div> <div class="table-header-select"> <el-select v-model="header.type"> <el-option v-for="(item, index) in typeList" :key="index" :value="item.value" :label="item.label"></el-option> </el-select> </div> </div> </template> </el-table-column> </el-table>
js：
tableList: [ { id: 1, userName: ‘王XX‘, age: 12 } ], // 类型下拉 typeList: [ { value: 1, label: ‘数字‘ }, { value: 2, label: ‘日期‘ }, { value: 3, label: ‘文本‘ } ], // 表头自定义 tableHeader: [ { label: ‘ID‘, prop: ‘id‘, type: ‘‘ }, { label: ‘用户名‘, prop: ‘userName‘, type: ‘‘ }, { label: ‘年龄‘, prop: ‘age‘, type: ‘‘ } ]
第二种使用render-header实现（使用该方法vue会有警告："Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header"。但是这并不影响运行）：
html：
<el-table :data="tableList" style="width: 100%" border> <el-table-column v-for="(header, hIndex) in tableHeader" :key="hIndex" :label="header.label" :prop="header.prop" :render-header="modelRenderLastHeader"> </el-table-column> </el-table>
js（data函数同上）：
/** * 自定义表头函数 * @date 2021-08-04 * @param {Function} h * @param {Object} column * @param {Number} $index * @returns {any} */ modelRenderLastHeader (h, { column, $index }) { return h(‘div‘, { style: { display: ‘flex‘, justifyContent: ‘space-between‘, alignItems: ‘center‘ } }, [ // div 标签，放展示内容 h(‘div‘, { style: { display: ‘block‘ } }, column.label), h(‘el-select‘, { on: { input: (value) => { // 如果当前下拉框有变动，给下拉框绑定的value 赋值 this.tableHeader[$index].type = value } }, props: { value: this.tableHeader[$index].type, // 给el-select 设置值（也是相当于v-model） size: ‘small‘ } }, [ // 给当前 el-select 设置 el-option this.typeList.map(item => { return h(‘el-option‘, { props: { value: item.value, label: item.label } }) }) ]) ]) }