datas : [
{
//用于判断是否展示子列表
isShowListItem : false,
//用于记录选中了哪些子项
selected : [],
//父标题
listTitle : "保利南悦湾",
//子列表
listItem : [
{
id : 1,
name : "李小龙"
},
{
id : 2,
name : "周星驰"
},
{
id : 3,
name : "周杰伦"
}
]
},
{
isShowListItem : false,
selected : [],
listTitle : "南庄万科城",
listItem : [
{
id : 4,
name : "大魔王"
},
{
id : 5,
name : "老妖怪"
}
]
}
]
<input type="checkbox" :value="item.id" v-model="data.selected" >
<input :id="data.listTitle" class="list-input" type="checkbox" :checked="isTitleChecked(data)" @change="changeTitleChecked(data,$event)" >
/**
* 当父标题状态变化时的处理方法
* @param data [当前项的data]
* @param event [当前项的event]
*/
changeTitleChecked : function (data,event) {
if (event.target.checked === true) {
data.listItem.forEach(function (item) {
data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
})
}else {
data.selected = [];
}
}
/**
* 判断父标题选择状态
* @param data [当前项的data]
* @returns {boolean}
*/
isTitleChecked : function (data) {
var _selected = data.selected;
var _listItem = data.listItem;
// 验证selected中是否含有全部的item的id 如果是 证明title要选中
return _listItem.every(function (item) {
return _selected.indexOf(item.id) != -1;
});
}
<input id="all-checked" type="checkbox" :checked="isAllChecked()" @change="changeAllChecked($event)" >
/**
* 全选框change事件的回调处理方法
* @param event
*/
changeAllChecked : function (event) {
if (event.target.checked === true) {
this.datas.forEach(function (data) {
data.listItem.forEach(function (item) {
data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
})
})
}else {
this.datas.forEach(function (data) {
data.selected = [];
})
}
}
/**
* 判断全选框选择状态
* @returns {boolean}
*/
isAllChecked : function () {
return this.datas.every(function (data) {
return data.selected.length === data.listItem.length;
});
}
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有