vue:使用element-ui制作动态表格

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

参考;

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/dynamic-table/components/FixedThead.vue

一、制作下拉多选框

<el-dropdown :hide-on-click="false" trigger="click">
<el-button size="small" icon="el-icon-s-grid">
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-checkbox-group v-model="checkboxVal">
<el-dropdown-item>
<el-checkbox label="mLatinName">药材拉丁名</el-checkbox>
</el-dropdown-item>
<el-dropdown-item>
<el-checkbox label="mOriginName">基源名称</el-checkbox>
</el-dropdown-item>
<el-dropdown-item>
<el-checkbox label="mOriginLatinName">基源拉丁名</el-checkbox>
</el-dropdown-item>
<el-dropdown-item>
<el-checkbox label="mMethod">药用部位</el-checkbox>
</el-dropdown-item>
<el-dropdown-item>
<el-checkbox label="mOriginInterview">基源简介</el-checkbox>
</el-dropdown-item>
<el-dropdown-item>
<el-checkbox label="mRemarks">药材简介</el-checkbox>
</el-dropdown-item>
</el-checkbox-group>
</el-dropdown-menu>
</el-dropdown>

二、表格中主要代码

<el-table-column prop="mName" label="药材名称" width="80"></el-table-column>
<el-table-column v-for="item in formThead" :key="item" :label="test[item]">
<template slot-scope="scope">{{ scope.row[item] }}</template>
</el-table-column>

三、设置要动态显示的表头

const defaultFormThead = [
"mLatinName",
"mOriginName",
"mOriginLatinName",
"mMethod",
"mOriginInterview",
"mRemarks"
];// 对应的中文名，用于给label赋值
const test = {
"mLatinName":"药材拉丁名",
"mOriginName":"基源名称",
"mOriginLatinName":"基源拉丁名",
"mMethod":"药用部位",
"mOriginInterview":"基源简介",
"mRemarks":"药材简介"
}

四、data中的值

export default {
data() {
return {
key: 1,
formTheadOptions: [
"mLatinName",
"mOriginName",
"mOriginLatinName",
"mMethod",
"mOriginInterview",
"mRemarks"
],
test: test,
checkboxVal: defaultFormThead, // checkboxVal
formThead: defaultFormThead // 默认表头 Default header
};
},

五、methods:

watch: {
checkboxVal(valArr) {
this.formThead = this.formTheadOptions.filter(
i => valArr.indexOf(i) >= 0
);
this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
}
},