vue 使用el-table自定義下拉框表頭
阿新 • • 發佈:2021-08-04
第一種方法使用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-selectv-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 } }) }) ]) ]) }希望大佬看到有不對的地方,提出博主予以改正!