vant van-checkbox-group 回显

vant van-checkbox-group 组件可以通过 v-model 绑定一个数组来实现多选功能，当选中或取消某个选项时，该数组会被更新。而回显则可以通过将该数组初始化为已选中的选项的数组来实现。

例如，如果我们有一个列表，其中包含三个选项，我们想要回显已选中的选项，可以将 v-model 绑定到一个数组：

<template>
  <van-checkbox-group v-model="selected">
    <van-checkbox name="option1" label="选项1" />
    <van-checkbox name="option2" label="选项2" />
    <van-checkbox name="option3" label="选项3" />
  </van-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      selected: ['选项1', '选项3'] // 初始化已选中的选项
    };
  }
};
</script>

在这个例子中，我们将 selected 数组初始化为包含选项1和选项3的数组，这样在页面加载时，这两个选项将会被选中。

当用户在页面上选择或取消某个选项时，selected 数组会被更新，从而实现了多选功能。

相关问题

vant2 van-checkbox 自定义图标

在 Vant 2 版本的 `van-checkbox` 组件中，你可以通过自定义图标来实现个性化的效果。以下是一个示例：

<template>
  <van-checkbox v-model="checked" shape="square" :icon="customIcon"></van-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      customIcon: {
        checked: '自定义选中图标',
        unchecked: '自定义未选中图标'
      }
    };
  }
};
</script>

在上面的示例中，我们通过 `:icon` 属性来设置自定义的图标。`customIcon` 对象包含了两个属性：`checked` 和 `unchecked`，分别代表选中状态和未选中状态下的自定义图标。

你可以替换 `'自定义选中图标'` 和 `'自定义未选中图标'` 为你实际使用的图标，可以是图片路径、Iconfont 类名或其他自定义样式。根据你使用的图标库或方式，可以灵活地配置自定义图标的样式和显示方式。

vant-checkbox搭配单元格组件使用嵌套vant-checkbox搭配单元格组件

可以使用Vant的Checkbox和Cell组件进行嵌套，实现类似于多选表格的效果。可以按照以下步骤进行操作：

1. 在Vue组件中引入Vant的Checkbox和Cell组件

import { Checkbox, CheckboxGroup, Cell, CellGroup } from 'vant';

2. 在模板中使用Cell组件包裹Checkbox组件

<cell-group>
  <cell v-for="data in dataList" :key="data.id">
    <checkbox-group v-model="data.checked">
      <checkbox :name="data.id" />
    </checkbox-group>
    <span>{{ data.name }}</span>
  </cell>
</cell-group>

3. 在Vue组件的data中定义dataList数组，并设置每个数据项的id、name和checked属性

data() {
  return {
    dataList: [
      { id: 1, name: '选项一', checked: false },
      { id: 2, name: '选项二', checked: false },
      { id: 3, name: '选项三', checked: false }
    ]
  };
}

4. 在Vue组件的methods中定义处理Checkbox变化事件的方法

methods: {
  handleCheckboxChange() {
    // 处理Checkbox变化事件
  }
}

通过以上步骤，在Vant的Checkbox和Cell组件的嵌套下，就可以实现多选表格的效果。需要注意的是，Checkbox组件的选中状态需要通过v-model绑定到数据项的checked属性上，以便在处理Checkbox变化事件时获取选中状态。