先看效果圖

html:

html： 我是通過v-if=“colData[0].istrue”，通過勾選框的選中和不選中來控制對應列的istrue的true/false，從而控制每一列的顯隱

<template><div><el-dropdown :hide-on-click="false" style="float: right"><i class="el-icon-s-unfold"></i><el-dropdown-menu slot="dropdown" ><!-- 作用是數據過多把表單數據的整體高度固定、多出的區域可以下拉展示 --><!-- <el-scrollbar style="min-height: 20vh"></el-scrollbar> --><el-checkbox-group v-model="colOptions"><el-dropdown-item @click.native="resect">重置</el-dropdown-item><el-dropdown-item divided v-for="(item, index) in colSelectArr" :key="index"><el-checkbox :label="item" :key="item"></el-checkbox></el-dropdown-item></el-checkbox-group></el-dropdown-menu></el-dropdown><el-table ref="tableDataRef" border stripe :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column type="index" width="55" label="序號" align="center"></el-table-column><el-table-column v-if="colData[0].istrue" prop="date" label="日期" width="180"> </el-table-column><el-table-column v-if="colData[1].istrue" prop="name" label="姓名" width="180"> </el-table-column><el-table-column v-if="colData[2].istrue" prop="sex" label="性別" width="180"> </el-table-column><el-table-column v-if="colData[3].istrue" prop="age" label="年齡" width="180"> </el-table-column><el-table-column v-if="colData[4].istrue" prop="dateTime" label="時間" width="180"> </el-table-column><el-table-column v-if="colData[5].istrue" prop="address" label="地址"> </el-table-column></el-table> </div> </template>

注: el-scrollbar 我暫時沒用沒適用于列特別多的情況帶滾動的效果，列大于20個 的可以試試。

data：
colData是所有表頭標題，colOptions是多選框默認全選，colSelectArr也是所有表頭標題，只是是跟多選框組綁定的

colData:[{title: "日期", istrue: true},{title: "姓名", istrue: true},{title: "性別", istrue: true},{title: "年齡", istrue: true},{title: "時間", istrue: true},{title: "地址", istrue: true} ], colOptions:[],//默認全選 colSelectArr: [],

js：

先在created 里面給 colSelectArr 數組、colOptions 數組賦值

我是直接放在watch里監聽選中的選項

watch: {colOptions(valArr) {var arr = this.colSelectArr.filter(i => valArr.indexOf(i) < 0); // 未選中this.colData.filter(i => {if (arr.indexOf(i.title) != -1) {i.istrue = false;} else {i.istrue = true;}})this.$nextTick(() => {this.$refs.tableDataRef.doLayout();})}},created(){var _this = this;for (let i = 0; i < _this.colData.length; i++) {_this.colSelectArr.push(_this.colData[i].title);if (_this.colData[i].title == '名稱') { //初始化不想展示的列可以放在這個條件里continue;}_this.colOptions.push(_this.colData[i].title); }}

全部代碼如下：

<template><div><el-dropdown :hide-on-click="false" style="float: right"><i class="el-icon-s-unfold"></i><el-dropdown-menu slot="dropdown" ><!-- 作用是數據過多把表單數據的整體高度固定、多出的區域可以下拉展示 --><!-- <el-scrollbar style="min-height: 20vh"></el-scrollbar> --><el-checkbox-group v-model="colOptions"><el-dropdown-item @click.native="resect">重置</el-dropdown-item><el-dropdown-item divided v-for="(item, index) in colSelectArr" :key="index"><el-checkbox :label="item" :key="item"></el-checkbox></el-dropdown-item></el-checkbox-group></el-dropdown-menu></el-dropdown><el-table ref="tableDataRef" border stripe :data="tableData" style="width: 100%"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column type="index" width="55" label="序號" align="center"></el-table-column><el-table-column v-if="colData[0].istrue" prop="date" label="日期" width="180"> </el-table-column><el-table-column v-if="colData[1].istrue" prop="name" label="姓名" width="180"> </el-table-column><el-table-column v-if="colData[2].istrue" prop="sex" label="性別" width="180"> </el-table-column><el-table-column v-if="colData[3].istrue" prop="age" label="年齡" width="180"> </el-table-column><el-table-column v-if="colData[4].istrue" prop="dateTime" label="時間" width="180"> </el-table-column><el-table-column v-if="colData[5].istrue" prop="address" label="地址"> </el-table-column></el-table> </div> </template><script> export default {data() {return {colData:[{title: "日期", istrue: true},{title: "姓名", istrue: true},{title: "性別", istrue: true},{title: "年齡", istrue: true},{title: "時間", istrue: true},{title: "地址", istrue: true}],colOptions:[],//默認全選colSelectArr: [],tableData: [{date: "2016-05-02",name: "王小虎",sex: 18,age: 20,dateTime: "2021-06-23 15:00:00",address: "上海市普陀區金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",sex: 18,age: 20,dateTime: "2021-06-23 15:00:00",address: "上海市普陀區金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",sex: 18,age: 20,dateTime: "2021-06-23 15:00:00",address: "上海市普陀區金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",sex: 18,age: 20,dateTime: "2021-06-23 15:00:00",address: "上海市普陀區金沙江路 1516 弄",}],}},methods:{resect(){this.colOptions = []; this.colSelectArr = [];this.colData.map(v=>{this.colSelectArr.push(v.title)// this.colOptions.push(v.title)})this.colSelectArr = [...this.colSelectArr]this.colOptions = this.colSelectArr}},watch: {colOptions(valArr) {var arr = this.colSelectArr.filter(i => valArr.indexOf(i) < 0); // 未選中this.colData.filter(i => {if (arr.indexOf(i.title) != -1) {i.istrue = false;} else {i.istrue = true;}})this.$nextTick(() => {this.$refs.tableDataRef.doLayout();})}},created(){var _this = this;for (let i = 0; i < _this.colData.length; i++) {_this.colSelectArr.push(_this.colData[i].title);if (_this.colData[i].title == '名稱') { //初始化不想展示的列可以放在這個條件里continue;}_this.colOptions.push(_this.colData[i].title); }} } </script>

總結

以上是生活随笔為你收集整理的element-ui 表格table，动态显示每一列的，重置全选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。