实现效果图
代码展示
<!-- 对活动类型进行选择 --> <el-icon :size="20" style="float: right; font-size: 33px" class="show-col-btn"> <el-popover placement="bottom" trigger="hover" width="80"> <template #reference> <el-icon :size="20"><Operation /></el-icon> </template> <div> <el-checkbox-group v-model="checkedColumns" @change="watchCheckedColumns" class="checkbox-wrap" > <el-checkbox size="large" style="display: block" v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox> </el-checkbox-group> </div> </el-popover> </el-icon> <!-- 表格主体 --> <el-table class="table" :data="tableData" :key="reload" height="400" :header-cell-style="{color:'#00567A','text-align':'center','font-size': '14px'}"> <el-table-column v-if="colData[0].istrue" align="center" key="Math.random()" prop="date" label="ID"></el-table-column> <el-table-column v-if="colData[1].istrue" align="center" key="Math.random()" prop="name" label="名称"></el-table-column> <el-table-column v-if="colData[2].istrue" align="center" key="Math.random()" prop="address" label="APP"></el-table-column> <el-table-column v-if="colData[3].istrue" align="center" key="Math.random()" prop="address" label="元数据"></el-table-column> <el-table-column v-if="colData[4].istrue" align="center" key="Math.random()" prop="address" label="描述"></el-table-column> <el-table-column v-if="colData[5].istrue" align="center" key="Math.random()" prop="address" label="创建者"></el-table-column> <el-table-column v-if="colData[6].istrue" align="center" key="Math.random()" prop="address" label="创建时间"></el-table-column> </el-table>script代码
变量定义
//用于存放随机数用于key属性的绑定 var reload = ref(); // 多选框的列表，列出表格的每一列 const checkBoxGroup = ref( ["ID", "名称", "APP", "元数据", "描述", "创建者", "创建时间", ] ) // 当前选中的多选框，代表当前展示的列 const checkedColumns = ref( ["ID", "名称", "APP", "元数据", "描述", "创建者", "创建时间", ] ) // colData中列出表格中的每一列，默认都展示 const colData = reactive([ { title: "ID", istrue: true }, { title: "名称", istrue: true }, { title: "APP", istrue: true }, { title: "元数据", istrue: true }, { title: "描述", istrue: true }, { title: "创建者", istrue: true }, { title: "创建时间", istrue: true }, ]) // 监听checkedColumns的变化，当checkedColumns发生变化时，重新渲染表格 const watchCheckedColumns = () => { // 遍历colData，将colData中的istrue属性设置为false colData.forEach((item) => { item.istrue = false }) // 遍历checkedColumns，将checkedColumns中的值在colData中找到对应的列，将istrue属性设置为true checkedColumns.value.forEach((item) => { colData.forEach((col) => { if (item === col.title) { col.istrue = true } }) }) // 重新渲染表格 reload.value = Math.random() }重点是 reload.value = Math.random() 这一行代码，解决了表格闪烁的问题。