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
              }
            })
          })
        ])
      ])
    }