有时候表格太多列,要是默认全都显示就会很拥挤,又不能固定只显示某些列,这时候我们可以让用户自定义要显示隐藏哪些列。
网上很多教程都是用的v-if
,但是v-if
非常麻烦,每一列都要写判断条件,本篇文章将用动态渲染
的方式来控制表格列的显示隐藏
关键点
)核心:监听checkbox
,checkbox
改变时,重新渲染表格列,同步保存到本地缓存。
完整代码:
<template>
<div class="app-container">
<el-button
style="margin-bottom: 10px"
size="small"
type="primary"
icon="el-icon-s-operation"
@click="tableSelectVisible = true"
>自定义列el-button
>
<el-dialog title="表格列配置" :visible.sync="tableSelectVisible">
<el-checkbox-group v-model="checkboxVal">
<el-checkbox
v-for="item in formTheadOptions"
:label="item.prop"
:key="item.prop"
>{{ item.label }}el-checkbox
>
el-checkbox-group>
el-dialog>
<el-table :key="key" :data="dataList" border stripe id="table">
<el-table-column
label="序号"
align="center"
type="index"
fixed
sortable
/>
<el-table-column
align="center"
v-for="(item, index) in formHead"
:key="index"
:label="item.label"
:prop="item.prop"
>el-table-column>
<el-table-column label="操作" align="center" width="120" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit"
>修改el-button
>
<el-button size="mini" type="text" icon="el-icon-delete"
>删除el-button
>
template>
el-table-column>
el-table>
div>
template>
<script>
// 默认
const defaultFormThead = [
{ label: "第一列", prop: "col1" },
{ label: "第二列", prop: "col2" },
{ label: "第三列", prop: "col3" },
{ label: "第四列", prop: "col4" },
{ label: "第五列", prop: "col5" },
];
const defaultCheckedValue = ["col1", "col2", "col3", "col4"];
export default {
name: "Goods",
data() {
return {
tableSelectVisible: false, // 对话框
checkboxVal: [], // 复选框选中的值
// 表格数据
dataList: [
{
col1: "11",
col2: "12",
col3: "13",
col4: "14",
col5: "15",
col6: "16",
col7: "17",
col8: "18",
col9: "19",
},
{
col1: "21",
col2: "22",
col3: "23",
col4: "24",
col5: "25",
col6: "26",
col7: "27",
col8: "28",
col9: "29",
},
{
col1: "31",
col2: "32",
col3: "33",
col4: "34",
col5: "35",
col6: "36",
col7: "37",
col8: "38",
col9: "39",
},
],
key: 1, // key保证table重新渲染
// 所有列
formTheadOptions: [
{ label: "第一列", prop: "col1" },
{ label: "第二列", prop: "col2" },
{ label: "第三列", prop: "col3" },
{ label: "第四列", prop: "col4" },
{ label: "第五列", prop: "col5" },
{ label: "第六列", prop: "col6" },
{ label: "第七列", prop: "col7" },
{ label: "第八列", prop: "col8" },
{ label: "第九列", prop: "col9" },
],
// 显示的列
formHead: [],
};
},
created() {
// 读缓存
let localHead = localStorage.getItem("tableHead");
if (localHead) {
this.formHead = JSON.parse(localHead);
this.updateCheck();
} else {
// 没有设置过就用默认的
this.formHead = defaultFormThead;
this.checkboxVal = defaultCheckedValue;
}
},
watch: {
/* 监听checkbox变化,动态渲染表格列 */
checkboxVal(valArr) {
// console.log(valArr);
// 用checkbox的值去所有列进行筛选
this.formHead = this.formTheadOptions.filter(
(item) => valArr.indexOf(item.prop) >= 0
);
// console.log(this.formHead);
this.key = this.key + 1; // 每次table不同key,保证重新渲染
// 缓存到本地
localStorage.setItem("tableHead", JSON.stringify(this.formHead));
},
},
methods: {
/* 初始化勾选 */
updateCheck() {
this.checkboxVal = [];
// 筛选出勾选的值
this.formHead.forEach((item) => {
this.checkboxVal.push(item.prop);
});
},
},
};
script>
<style lang="scss" scoped>style>