<!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>白色111
87 声望1 粉丝
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。