就是把所有都勾选后,全选还是没有checked(数据改变,视图未更新)
<checkbox-group @change="handleSelect">
<view v-for="item in list" :key="item.id" class="item">
<checkbox :value="item.id" :checked="item.checked" />
</view>
</checkbox-group>
<checkbox-group @change="handleSelectAll">
<checkbox :checked="list.length == hasSelected.length" id="check_all" />
</checkbox-group>
data:
list: [
{id: '0', checked: false},
{id: '1', checked: false},
{id: '2', checked: false},
{id: '3', checked: false},
{id: '4', checked: false},
],
hasSelected: [],
method:
handleSelect(e) {
let ids = e.detail.value
this.list.forEach((it, index) => {
if (ids.includes(it.id)) {
this.$set(this.list[index], 'checked', true)
} else {
this.$set(this.list[index], 'checked', false)
}
})
this.$set(this, 'hasSelected', this.list.filter(it => {
return ids.includes(it.id)
}))
}
handleSelectAll(e) {
if (this.hasSelected.length < this.list.length) {
this.hasSelected = this.list
this.list.forEach((it, index) => {
this.$set(this.list[index], 'checked', true)
})
} else {
this.hasSelected = []
this.list.forEach(it => {
this.$set(this.list[index], 'checked', false)
})
}
},
1 个回复
DCloud_uniCloud_WYQ
可以先在 computed 里面算好 list.length == hasSelected.length , 再传给checkbox的checked