1. 程式人生 > 其它 >vue 使用el-table自定義下拉框表頭

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
              }
            })
          })
        ])
      ])
    }
希望大佬看到有不對的地方,提出博主予以改正!