vue 使用el-table自定义下拉框表头

第一种方法使用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
              }
            })
          })
        ])
      ])
    }