vue 使用 computed 快速创建checkbox
// 单个选项
<li v-for="(item, index) in tList" :key="index" :class="{ active: item.checked }" @click="checkToggle(item, index)">
<span><input type="checkbox" v-model="item.checked"/></span>
</li>
// 全选按钮
<label for="all"><input type="checkbox" name="" id="all" v-model="checkAll" />全选</label>
data(){
return {
ticketList: [
{
...,
...,
checked : false
}
],
selectedList :[]// 选中的
}
watch: {
checkAll: {
handler(val) {
console.log(val, "watch");
this.selectedList = [];
if (val) {
this.selectedList = this.ticketList;
} else {
this.selectedList = this.ticketList.filter(item => item.checked);
}
console.log(this.selectedList, "watch");
},
deep: true
}
},
computed: {
checkAll: {
get: function() {
return this.ticketList.reduce(function(prev, curr) {
return prev && curr.checked;
}, true);
},
set: function(newValue) {
this.ticketList.forEach(function(item) {
item.checked = newValue;
});
}
}
},
methods: {
checkToggle(row) {
row.checked = !row.checked;
}
}