首页 > 技术文章 > vue实现checked 全选功能

Lcsxx 2019-06-19 13:52 原文

记录一下

 

module.data = {

 result: {}, items: []
//初始化全选按钮, 默认不选
,isCheckedAll: false
};
module.vue = new Vue({
el: moduleId,
data: module.data,
methods: {

CheckItem: function (item) {

            console.log(item);//true
            let idIndex = this.items.indexOf(item)
            if (idIndex >= 0) {
                // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                this.items.splice(idIndex, 1)
            } else {
                // 选中该checkbox
                this.items.push(item)
            }
            console.log(this.items);
        },
        CheckAll: function () {
            console.log(module.data.result.Data);
            this.isCheckedAll = !this.isCheckedAll
            if (this.isCheckedAll) {
                // 全选时
                this.items = []
                this.result.Data.forEach(function (x) {
                    this.items.push(x.Id)
                }, this)
            } else {
                this.items = []
            }
            console.log(this.items);
        }

}
});

 
<input type="checkbox" id="qx" v-on:click="CheckAll()" />全选
<input type="checkbox" name="ck" v-on:click="CheckItem(x.Id)" :checked="items.indexOf(x.Id)>=0" :value="x.Id" />

 

推荐阅读