<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="index.css"></head><style> .el-checkbox{display:block;min-width: 100px;padding: 5px 10px;cursor: pointer;margin-right:0px;}.el-checkbox:hover{background-color: #ecf5ff;color: #66b1ff;}</style><body> <div> <div id="app"> <div style="width:800px;"> <template> <el-table style="width: 100%" border :data="tableData"> <template v-for="(item,index) in total_tableHead"> <el-table-column :fixed="index==0" v-if="item.show" :prop="item.data" sortable :label="item.title" :key="index"></el-table-column> </template> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> </template> </div> <div class="data_norm"> <el-dropdown trigger="click" :hide-on-click="false"> <span class="el-dropdown-link"> 数据指标 </span> <el-dropdown-menu slot="dropdown"> <template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <el-checkbox v-for="(item,index) in total_tableHead" @change="checked_item(item,index)" :label="item.title" :key="item.title">{{item.title}}</el-checkbox> </el-checkbox-group> </template> </el-dropdown-item> </el-dropdown> </div> </div></body><script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script><!-- import Vue before Element :default-value="(new Date()).getTime()-3600*1000*24*30"--><script src="vue.js"></script><!-- import JavaScript --><script src="index.js"></script><script>var Main = { data() { return { total_tableHead: [ { title: '日期', data: 'date' }, { title: '姓名', data: 'name' }, { title: '省份', data: 'province' }, { title: '市区', data: 'city' }, { title: '地址', data: 'address' }, { title: '邮编', data: 'zip' }, ], tableData: [{ date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333, ssd: 1 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1517 弄', zip: 200333, ssd: 1 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1519 弄', zip: 200333, ssd: 1 }, { date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1516 弄', zip: 200333, ssd: 1 }], checkAll: true, checkedCities: [], allIndex: [], isIndeterminate: false } }, created() { //默认全选都显示 let storage = window.localStorage; let c = storage.getItem("c"); let that = this; this.total_tableHead.map(function(item, i) { that.allIndex.push(i) }) if (c == undefined) { this.checkAll = true; this.CheckAll(true, 0); } else { if (JSON.parse(c).length == 0) { this.checkAll = false; } else { if (JSON.parse(c).length == this.total_tableHead.length) { this.isIndeterminate = false; } else { this.isIndeterminate = true; } this.checkAll = true; this.CheckAll(true, 1); } } }, methods: { handleClick() { }, handleCheckAllChange(val, cx, flag) { console.log(val) let that = this; let thead = []; let storage = window.localStorage; if (val) { storage.setItem('c', JSON.stringify(this.allIndex)) this.total_tableHead.map(function(item, i) { item.show = !item.show; thead.push(item.title); }) } else { let x = []; storage.setItem('c', JSON.stringify(x)) this.total_tableHead.map(function(item, i) { item.show = !item.show; }) } this.checkedCities = val ? thead : []; this.isIndeterminate = false; }, CheckAll(val, type) { let thead = []; let storage = window.localStorage; let that = this; this.total_tableHead.map(function(item, i) { if (type == 0) { item.show = !item.show; thead.push(item.title); storage.setItem('c', JSON.stringify(that.allIndex)) } else if (type == 1) { let c = JSON.parse(window.localStorage.getItem("c")) if (c.indexOf(i) != -1) { item.show = !item.show; thead.push(item.title) } } }) this.checkedCities = val ? thead : []; }, handleCheckedCitiesChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.total_tableHead.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.total_tableHead.length; }, checked_item(item, index) { //扭转存入本地数据 if (item.show) { this.allIndex.splice(this.allIndex.indexOf(index), 1) } else { this.allIndex.push(index) } //存入本地缓存 let storage = window.localStorage; storage.setItem('c', JSON.stringify(this.allIndex)) item.show = !item.show } }, computed: { }, watch: { }}var Ctor = Vue.extend(Main)new Ctor().$mount('#app')</script></html>