关于vue.js:vue-element-eltable-elcheckbox-指标筛选-缓存本地-全选反选

71次阅读

共计 4122 个字符,预计需要花费 11 分钟才能阅读完成。

<!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>

正文完
 0