多选框回显el-form

### 实现多选框回显功能

为了实现在 `Element UI` 表单中多选框 (`el-checkbox`) 的回显功能，可以采用如下方法：

当页面加载时，获取到已有的选项列表以及当前应被选中的项的数据。遍历这些数据并与界面上的每一个多选框对比其唯一标识符（通常是 ID 或者其他唯一字段），如果匹配，则设置该多选框为选中状态。

具体来说，在 Vue 组件内定义一个属性用于存储初始状态下应该被勾选的项目集合，并将其绑定至 `v-model` 属性上；同时利用 `watch` 监听器来监听这个集合的变化以便及时更新视图层的状态[^2]。

下面是一个简单的例子展示如何操作：

<template>
  <div>
    <!-- 定义一个多选框组 -->
    <el-checkbox-group v-model="selectedItems">
      <el-checkbox v-for="(item, index) in items" :key="index" :label="item.id">{{ item.value }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设这是从服务器端接收到的数据
      allOptions: [
        { id: '0', value: "油电混合"},
        { id: '1', value: "汽油车"}, 
        { id: '2', value: "纯电动"}
      ],
      
      selectedIds: ['0','2'], // 这里表示默认要选中的ID
      
      items: [],              // 页面实际渲染使用的items
      selectedItems: []       // 用户最终选择的结果集
    };
  },
  
  created(){
     this.items = this.allOptions;
     
     // 将需要默认选中的IDs转换成对应的对象形式存入selectedItems
     let tempSelectedItems = [];
     for(let i=0;i<this.selectedIds.length;i++){
         const selectedItem = this.allOptions.find(item => item.id === this.selectedIds[i]);
         if(selectedItem){
             tempSelectedItems.push(selectedItem);
         }
     }

     this.selectedItems = tempSelectedItems.map(item=>item.id);
  },

};
</script>

在这个案例中，`allOptions` 是模拟的服务端返回的所有可选项，而 `selectedIds` 列表包含了那些应当预先被标记为已选中的条目。通过在组件创建完成后初始化这两个变量并填充相应的值，就可以达到预期的效果了。