起因：因为elementui的表格没有做动静渲染表头的操作，本人封装了一个
步骤一：建设vue组件
<template> <div class="operate-btn"> <el-button class="o-ml-12" icon="el-icon-s-operation" v-preventReClick type="success" size="mini" @click="headFilterShow" >显示项调整</el-button > <!-- 筛选穿梭框 --> <el-dialog :close-on-click-modal="false" v-dialogDrag :visible.sync="headFilter.visible" title="显示项调整" width="536px"> <el-form label-position="right" label-width="100px" :model="coefficientAdjustShowForm"> <el-form-item label="测试字段："> <el-checkbox :indeterminate="coefficientAdjustShowForm.options1IsInde" v-model="coefficientAdjustShowForm.option1CheckAll" @change="option1CheckAllChg" >全选</el-checkbox > <el-checkbox-group @change="options1CheckChg" v-model="coefficientAdjustShowForm.options1"> <el-checkbox v-for="item in headerShowList.option1" :label="item" :key="item">{{ item }}</el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="试验字段："> <el-checkbox :indeterminate="coefficientAdjustShowForm.options2IsInde" v-model="coefficientAdjustShowForm.option2CheckAll" @change="option2CheckAllChg" >全选</el-checkbox > <el-checkbox-group @change="options2CheckChg" v-model="coefficientAdjustShowForm.options2"> <el-checkbox v-for="item in headerShowList.option2" :label="item" :key="item">{{ item }}</el-checkbox> </el-checkbox-group> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button v-preventReClick @click="headFilter.visible = false">取 消</el-button> <el-button v-preventReClick type="primary" @click="handleClickUpdateThead">确 定</el-button> </div> </el-dialog> </div></template><script>export default { name: 'tableHeadAdjust', props: ['tableData', 'headerShowList', 'headFilter', 'curThis'], data() { return { coefficientAdjustShowForm: { options1: [], options2: [], option1CheckAll: false, option2CheckAll: false, options1IsInde: true, options2IsInde: true } }; }, methods: { // 单选 options1CheckChg(value) { let checkedCount = value.length; this.coefficientAdjustShowForm.option1CheckAll = checkedCount === this.headerShowList.option1.length; this.coefficientAdjustShowForm.options1IsInde = checkedCount > 0 && checkedCount < this.headerShowList.option1.length; }, options2CheckChg(value) { let checkedCount = value.length; this.coefficientAdjustShowForm.option2CheckAll = checkedCount === this.headerShowList.option2.length; this.coefficientAdjustShowForm.options2IsInde = checkedCount > 0 && checkedCount < this.headerShowList.option2.length; }, // 全选 option1CheckAllChg(val) { this.coefficientAdjustShowForm.options1 = val ? this.headerShowList.option1 : []; this.coefficientAdjustShowForm.options1IsInde = false; }, option2CheckAllChg(val) { this.coefficientAdjustShowForm.options2 = val ? this.headerShowList.option2 : []; this.coefficientAdjustShowForm.options2IsInde = false; }, headFilterShow() { this.curThis.headFilter.visible = true; // 解决点击CheckBox时候，动静扭转了表头的数值 this.$nextTick(() => { this.coefficientAdjustShowForm.options1 = this.curThis.headFilter.value.option1; this.coefficientAdjustShowForm.options2 = this.curThis.headFilter.value.option2; this.options1CheckChg(this.coefficientAdjustShowForm.options1); this.options2CheckChg(this.coefficientAdjustShowForm.options2); }); }, handleClickUpdateThead() { // 当表头数据特地多的时候清空table数据，解决卡顿问题 // this.curThis.tableData = []; // 排序 let list1 = []; let option1 = this.curThis.headerShowList.option1; if (option1.length > 0) { option1.forEach((item) => { if (this.coefficientAdjustShowForm.options1.length > 0) { this.coefficientAdjustShowForm.options1.forEach((item1) => { if (item == item1) { list1.push(item); } }); } }); } let list2 = []; let option2 = this.curThis.headerShowList.option2; if (option2.length > 0) { option2.forEach((item) => { if (this.coefficientAdjustShowForm.options2.length > 0) { this.coefficientAdjustShowForm.options2.forEach((item1) => { if (item == item1) { list2.push(item); } }); } }); } this.curThis.headFilter.value.option1 = list1; this.curThis.headFilter.value.option2 = list2; // 贮存到storage外面 this.curThis.king_setConceal(this.curThis.$route.path, this.curThis.headFilter.value); this.headFilter.visible = false; // // 触发扭转 // this.$emit('headFilterShowChg'); } }};</script><style></style>
步骤二：建设vue单页面
<template> <div> <tableHeadAdjust :tableData="tableData" :headerShowList="headerShowList" :headFilter="headFilter" :curThis="this"></tableHeadAdjust> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <!-- 形式一：同一级表头 --> <!-- <el-table-column v-for="(item, index) in headFilter.value.option1" :key="index + 'option1'" :label="item" :prop="tableHeadeTryList[item]"> </el-table-column> <el-table-column v-for="(item, index) in headFilter.value.option2" :key="index + 'option2'" :label="item" :prop="tableHeadTestList[item]"> </el-table-column> --> <!-- 形式二：父子表头 --> <el-table-column v-for="(item, index) in headFilter.value.option1" :key="index + 'option1'" :label="item"> <el-table-column v-for="(item, index) in headFilter.value.option2" :key="index + 'option2'" :label="item" :prop="tableHeadTestList[item]" > </el-table-column> </el-table-column> </el-table> </div></template><script>import tableHeadAdjust from '@/components/tableHeadAdjust.vue';export default { name: 'sysIndex', components: { tableHeadAdjust }, data() { return { tableData: [], headFilter: { visible: false, value: { option1: [], option2: [] } }, headerShowList: { option1: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7'], option2: ['试验1', '试验2', '试验3', '试验4', '试验5', '试验6', '试验7'] } }; }, computed: { tableHeadeTryList() { return { 测试1: 'try1', 测试2: 'try2', 测试3: 'try3', 测试4: 'try4', 测试5: 'try5', 测试6: 'try6', 测试7: 'try7' }; }, tableHeadTestList() { return { 试验1: 'test1', 试验2: 'test2', 试验3: 'test3', 试验4: 'test4', 试验5: 'test5', 试验6: 'test6', 试验7: 'test7' }; } }, mounted() { // userMark为了辨别是哪个用户的表头，您能够依据手机号或者id用户的惟一标识来做 localStorage.setItem('userMark', 'userMark1'); // 初始化表格表头 this.king_tableConceal(this); this.tableData = [ { date: '2016-05-02', name: '王小虎', try1: '好的1', try2: '好的2', try3: '好的3', try4: '好的4', try5: '好的5', try6: '好的6', try7: '好的7', test1: '没方法1', test2: '没方法2', test3: '没方法3', test4: '没方法4', test5: '没方法5', test6: '没方法6', test7: '没方法7' }, { date: '2016-05-04', name: '王小虎', try1: '好的1', try2: '好的2', try3: '好的3', try4: '好的4', try5: '好的5', try6: '好的6', try7: '好的7', test1: '没方法1', test2: '没方法2', test3: '没方法3', test4: '没方法4', test5: '没方法5', test6: '没方法6', test7: '没方法7' } ]; }, methods: { /* reson:上面这些办法能够放到全局办法外面方便使用 author:king之浪迹天涯 */ /* * 初始化表格显示暗藏项 */ king_tableConceal(curThis) { let headerShowList = curThis.king_getConceal(curThis.$route.path); curThis.headFilter.value = headerShowList ? headerShowList : { option1: curThis.headerShowList.option1, option2: curThis.headerShowList.option2 }; }, /** * 获取用户表格显示暗藏项 * @param path */ king_getConceal(path) { let USER_ID = localStorage.getItem('userMark'); let USER_TABLEHEADADUST = localStorage.getItem('USER_TABLEHEADADUST'); USER_TABLEHEADADUST = USER_TABLEHEADADUST ? JSON.parse(USER_TABLEHEADADUST) : {}; if (USER_TABLEHEADADUST.hasOwnProperty(USER_ID) && USER_TABLEHEADADUST[USER_ID].hasOwnProperty(path)) return USER_TABLEHEADADUST[USER_ID][path]; return ''; }, /** * 存储用户表格显示暗藏项 * @param path、theader */ king_setConceal(path, conceal) { // userMark为了辨别是哪个用户的表头，您能够依据手机号或者id用户的惟一标识来做 let USER_ID = localStorage.getItem('userMark'); let USER_TABLEHEADADUST = localStorage.getItem('USER_TABLEHEADADUST'); USER_TABLEHEADADUST = USER_TABLEHEADADUST ? JSON.parse(USER_TABLEHEADADUST) : {}; if (!USER_TABLEHEADADUST.hasOwnProperty(USER_ID)) { USER_TABLEHEADADUST[USER_ID] = { [path]: conceal }; } else { USER_TABLEHEADADUST[USER_ID][path] = conceal; } localStorage.setItem('USER_TABLEHEADADUST', JSON.stringify(USER_TABLEHEADADUST)); } }};</script><style></style>