如何让van-cell-group 下的van-checkbox 回显
时间: 2023-12-28 14:04:19 浏览: 34
要实现 van-cell-group 下的 van-checkbox 回显,可以将 van-checkbox 放在 van-cell 中,并将 van-cell 组件的 v-model 绑定到一个数组中,这样就可以实现 van-checkbox 的回显效果了。以下是一个示例:
```html
<template>
<van-cell-group v-model="checkedList">
<van-cell v-for="(item, index) in options" :key="index" :title="item.label" :value="item.value">
<van-checkbox :label="item.value" />
</van-cell>
</van-cell-group>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项 1', value: 1 },
{ label: '选项 2', value: 2 },
{ label: '选项 3', value: 3 },
],
checkedList: [1, 2],
};
},
};
</script>
```
在上面的示例中,我们将 van-checkbox 放在 van-cell 中,并将 van-cell 组件的 v-model 绑定到一个数组 checkedList 中,这样当用户选中或取消选中一个 van-checkbox 时,对应的数组元素也会被添加或移除,从而实现回显效果。初始时,选项 1 和选项 2 被选中,因为它们的 value 值分别为 1 和 2,对应的数组元素也为 1 和 2。当用户点击选项 3 后,对应的数组元素会被添加到 checkedList 中,此时 checkedList 的值为 [1, 2, 3],因此选项 1、2、3 都被选中。当用户再次点击选项 2 后,对应的数组元素会被移除,此时 checkedList 的值为 [1],因此只有选项 1 被选中。