VUE UVIEW组件u-checkbox-group实现多选中效果

在 Vue 开发中，UView UI 组件库提供了丰富的组件，包括 `u-checkbox-group`，用于创建可多选的复选框组。要实现多选并且显示已选中项的效果，可以按照以下步骤操作：

1. 安装并引入 UView UI：
首先，在项目中安装 UView UI，如果还没有安装，可以在终端或命令行中运行：

   npm install uview-ui-vue

然后在 Vue 文件中导入组件：

   import { uCheckboxGroup } from "uview-ui-vue";

2. 创建 `u-checkbox-group` 组件实例：
在模板中，将 `u-checkbox-group` 标签用于包裹单选按钮，并设置 `value` 和 `model` 属性来控制选中状态和双向数据绑定：

   <template>
     <u-checkbox-group v-model="selectedItems" @input="handleSelectionChange">
       <u-checkbox v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
         {{ item.label }}
       </u-checkbox>
     </u-checkbox-group>
   </template>

3. 数据绑定和事件处理：
- 在 `data` 对象中定义 `selectedItems` 数组来存储选中的值，初始化时可为空：

   data() {
     return {
       selectedItems: [], // 初始化时选择的默认项
       options: [
         // 这里是一系列可用选项的配置，包含 label 和 value 属性
         { label: '选项A', value: 'optionA' },
         { label: '选项B', value: 'optionB' },
         //...更多选项...
       ]
     };
   },

4. 处理多选状态变化：
- `handleSelectionChange` 函数会在用户点击复选框时触发，更新 `selectedItems` 数组：

   methods: {
     handleSelectionChange(val) {
       this.selectedItems = val; // 通过新值更新选中项
     }
   }

现在，每次用户勾选或取消勾选复选框时，`selectedItems` 数组就会相应地更新，显示出已选中的项目。