做外贸接私单的网站,如何做网站大图片,做网站哪里买空间好,企业所得税税率2019效果
场景#xff1a;Vue全选框在头部#xff0c;子框在v-for循环内部。 实现#xff1a;点击全选框#xff0c;所有子项选中#xff0c;再次点击取消#xff1b;子项全选中#xff0c;全选框自动勾选#xff0c;子项并未全选#xff0c;全选框不勾选#xff1b;已选…效果
场景Vue全选框在头部子框在v-for循环内部。 实现点击全选框所有子项选中再次点击取消子项全选中全选框自动勾选子项并未全选全选框不勾选已选和全选数量统计
实现
#1. html
div classcheckall :classisCheck?active: clickclickAll/divspan全选/spandiv classcard v-for(item, index) in tableData :keyindexdiv classcheckitem :classitem.isCheck?active: clickclickItem(item.id)/div
/div#2. js
data() {return {tableData: [],isCheck:false,Selected: 0,SelectAll: 0,}},
mounted:{this.init();
}
methods:{async init(){let res await ...; //请求this.tableData res.datathis.SelectAll res.data.length;this.tableData this.tableData.map(item {item.isCheck falsereturn item})},clickItem(id){this.tableData.forEach(v{v.id id ? v.isCheck !v.isCheck : })this.Selected this.tableData.filter(ii.isCheck).length; if(this.Selected this.SelectAll){this.isCheck true;}else{this.isCheck?this.isCheckfalse:;}},clickAll(){this.isCheck !this.isCheck;if(this.isCheck){this.tableData.forEach(v{v.isCheck true;})}else{this.tableData.forEach(v{v.isCheck false;})}this.Selected this.tableData.filter(ii.isCheck).length;}
}#3. css
.checkall{height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;
}
.checkall.active{background-color: #1E77F5;}.checkitem{position: absolute;top: .16rem;right: .16rem;height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;z-index: 1;
}
.checkitem.active{background-color: #1E77F5;
}#完整代码
div classcheckall :classisCheck?active: clickclickAllspan classicon iconfont stylecolor:#fff; v-showisCheck#xe715;/span
/divspan全选/spandiv classcard v-for(item, index) in tableData :keyindexdiv classcheckitem :classitem.isCheck?active: clickclickItem(item.id)span classicon iconfont stylecolor:#fff; v-showitem.isCheck#xe715;/span/div
/div
...
data() {return {tableData: [],isCheck:false,Selected: 0,SelectAll: 0,}},
mounted:{let res await ...; //请求后端接口this.tableData res.datathis.SelectAll res.data.length;this.tableData this.tableData.map(item {item.isCheck falsereturn item})
}
methods:{clickItem(id){this.tableData.forEach(v{v.id id ? v.isCheck !v.isCheck : })this.Selected this.tableData.filter(ii.isCheck).length; //选完统计一下选中个数同时调用this.tableData本身可以让视图及时更新不再调用会出现选中没效果if(this.Selected this.SelectAll){this.isCheck true;}else{this.isCheck?this.isCheckfalse:;}},clickAll(){this.isCheck !this.isCheck;if(this.isCheck){this.tableData.forEach(v{v.isCheck true;})}else{this.tableData.forEach(v{v.isCheck false;})}this.Selected this.tableData.filter(ii.isCheck).length;}
}
...
.checkall{height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;
}
.checkall.active{background-color: #1E77F5;}.checkitem{position: absolute;top: .16rem;right: .16rem;height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;z-index: 1;
}
.checkitem.active{background-color: #1E77F5;
}
