1 <template>
2
3 <div class="app-container">
4 <el-table :data="tableData" stripe border style="width: 98%" ref="tableDataRef">
5 <el-table-column type="selection" width="55" align="center"></el-table-column>
6 <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
7 <el-table-column v-if="colData[0].istrue" prop="name" label="名称" align="center"></el-table-column>
8 <el-table-column v-if="colData[1].istrue" prop="select" label="性别" align="center"></el-table-column>
9 <el-table-column v-if="colData[2].istrue" prop="kafang" label="年龄" align="center"></el-table-column>
10 <el-table-column v-if="colData[3].istrue" prop="fengbi" label="时间" align="center"></el-table-column>
11 <el-table-column v-if="colData[4].istrue" prop="isETF" label="事件" align="center"></el-table-column>
12 <el-table-column v-if="colData[5].istrue" prop="range" label="地点" align="center"></el-table-column>
13 </el-table>
14
15
16 <el-popover placement="right" width="400" trigger="click">
17 <el-checkbox-group v-model="colOptions">
18 <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
19 </el-checkbox-group>
20 <el-button slot="reference">设置</el-button>
21 </el-popover>
22 </div>
23 </template>
24
25 <script>
26 import Treeselect from '@riophae/vue-treeselect'
27 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
28 import CRUD, { presenter, header, form, crud } from './Crud/crud'
29 import FixedThead from './el-mode/FixedThead'
30 import crudOperation from './Crud/CRUD.operation'
31 export default {
32 data(){
33 return {
34 tableData:[
35 {name:"a",select:"b",kafang:"c",fengbi:"d",isETF:"e",range:"f"},
36 {name:"a",select:"b",kafang:"c",fengbi:"d",isETF:"e",range:"f"}
37 ],
38 colData: [{title: "名称",istrue: true},
39 {title: "性别",istrue: true},
40 {title: "年龄",istrue: true},
41 {title: "时间",istrue: true},
42 {title: "事件",istrue: true},
43 {title: "地点",istrue: true}],
44 colOptions: ["名称","性别", "年龄","时间","事件","地点",], //默认全选
45 colSelect: ["名称", "性别","年龄","时间","事件", "地点",]
46 }
47 },
48 watch: {
49 colOptions(valArr) {
50 var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
51 this.colData.filter(i => {
52 if (arr.indexOf(i.title) != -1) {
53 i.istrue = false;
54 this.$nextTick(() => {
55 this.$refs.tableDataRef.doLayout();
56 });
57 } else {
58 i.istrue = true;
59 this.$nextTick(() => {
60 this.$refs.tableDataRef.doLayout();
61 });
62 }
63 });
64 }
65 }
66
67 }
68 </script>
test
