点击设置弹出列数,并根据选择列进行展示:
点击勾选之后改变列表展示列
Html:
<div id="app"> <template> <el-popover placement="right" width="800" trigger="click" style="margin-left:80%"> <el-checkbox-group v-model="colOptions"> <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox> </el-checkbox-group> <el-button slot="reference">设置</el-button> </el-popover> <el-table :data="tableData" stripe border style="width: 98%" ref="tableDataRef"> <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="name" label="名称" align="center"></el-table-column> <el-table-column v-if="colData[1].istrue" prop="select" label="性别" align="center"></el-table-column> <el-table-column v-if="colData[2].istrue" prop="kafang" label="年龄" align="center"></el-table-column> <el-table-column v-if="colData[3].istrue" prop="fengbi" label="时间" align="center"></el-table-column> <el-table-column v-if="colData[4].istrue" prop="isETF" label="事件" align="center"></el-table-column> <el-table-column v-if="colData[5].istrue" prop="range" label="地点" align="center"></el-table-column> </el-table> </template> </div>
Js:
new Vue({ el:'#app', data() { return { colData: [{title: "名称",istrue: true}, {title: "性别",istrue: true}, {title: "年龄",istrue: true}, {title: "时间",istrue: true}, {title: "事件",istrue: true}, {title: "地点",istrue: true}], colOptions: [], colSelect: [] } }, mounted(){ }, methods: { formatter(row, column) { return row.address; }, sortChange(val){ const { order } = val console.log(order) } }, created() { var _this = this; for (let i = 0; i < _this.colData.length; i++) { _this.colSelect.push(_this.colData[i].title); if (_this.colData[i].title == '名称') { //初始化不想展示的列可以放在这个条件里 continue; } _this.colOptions.push(_this.colData[i].title); } }, watch: { colOptions(valArr) { var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中 this.colData.filter(i => { if (arr.indexOf(i.title) != -1) { i.istrue = false; this.$nextTick(() => { this.$refs.tableDataRef.doLayout(); }); } else { i.istrue = true; this.$nextTick(() => { this.$refs.tableDataRef.doLayout(); }); } }); } } })