动态选择表头的隐藏和显示--elementui的table表格
站长
· 阅读数 299
原因：由于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>