写这个教程的原因
由于uni-app的checkbox不能v-model双向绑定实现选中状态的切换,只能用单项绑定:checked实现状态的切换。这就非常的麻烦了下面我说一下解决方法.
思路来源
uniapp的checkbox 可以包裹一个checkbox-group标签,这玩意可以实现多选而且应用于列表循环多选非常方便,因为如下图:
它的detail.value为选中checkbox的value值数组,。如果要实现如下图所示的全选功能必须借助这个事件。
解决方法(教程):
1.首先先通过计算属性为后端传来的对象数组增加checked属性
const itemsWithChecked = computed(() => {
return items.value.map((item) => ({ ...item, checked: false }))
})
2.为v-for循环的每一个子项的checkbox 绑定checked,确保你的列表被checkbox-group包裹然后绑定changeCheckbox函数
只是一个例子
<checkbox-group @change="changeCheckbox">
<view v-for:item in xxx>
<checkbox v-if="root" :value="item.name" class="check" :checked="item.checked" />
</view>
</checkbox-group>
3.单独弄一个checkbox作为全选按钮哦!为checkbox的checked属性设置一个单独的ref
const allCheck = ref(false) 然后加一个点击事件allChecked
4.接下来就到了书写js的时间了如下代码
//这个函数为checkboxgroup的change事件
const changeCheckbox: UniHelper.CheckboxGroupOnChange = (e) => {
//循环列表先都置为false (未选中状态)
itemsWithChecked.value.forEach((a) => {
a.checked = false
allCheck.value = false
})
//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
itemsWithChecked.value.forEach((a) => {
e.detail.value.forEach((b) => {
if (a.name == b) {
a.checked = true
}
})
})
//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
if (e.detail.value.length == itemsWithChecked.value.length) {
allCheck.value = true
}
//将选中的数组保存在某个ref中
checkedData.value = e.detail.value
}
//这个函数单独控制全选按钮的状态 直接在这个全选按钮添加@tap点击事件就行
const allChecked = () => {
//更改选中状态
allCheck.value = !allCheck.value
//如果全选全部置为ture
if (allCheck.value == true) {
itemsWithChecked.value.forEach((a) => {
a.checked = true
})
} else {
itemsWithChecked.value.forEach((a) => {
a.checked = false
})
}
}
本教程只是一个思路,需要有uniapp vue3 ts基础哦 看不懂私信我 qq1174782213
因篇幅问题不能全部显示,请点此查看更多更全内容
怀疑对方AI换脸可以让对方摁鼻子 真人摁下去鼻子会变形
女子野生动物园下车狼悄悄靠近 后车司机按喇叭提醒
睡前玩8分钟手机身体兴奋1小时 还可能让你“变丑”
惊蛰为啥吃梨?倒春寒来不来就看惊蛰
男子高速犯困开智能驾驶出事故 60万刚买的奔驰严重损毁