PeterChu

1. ElementUI 单选框与多选框的 :label='form.dictValue'

单选框不论 dictValue 中存的是字符串还是数字类型，都可以正常回显，多选框则必须数据类型一致，否则不能正常回显。

单选框 Option Attributes 的 value 表示 选项的值，类型可以为 string/number/object，label 表示 选项的标签，若不设置则默认与 value 相同，类型可以为 string/number.

多选框 Checkbox-button Attributes 的 label 表示 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效） ，类型可以为 string / number / boolean.

2. 多选框组的全选功能实现

基于 xxxx.vue 页面

1. data 中定义

   // 弹出层表单中渠道代码字段 复选框组件
   // cxxxxxxId 渠道代码
   checkAllCxxxxxxId: false,
   checkedCxxxxxxId: [],
   isIndeterminateCxxxxxxId: true,
   // 渠道代码数据字典
   cxxxxxxIdOptions: [],
   

2. 如果 cxxxxxxId 字段需要通过请求后端获取数据，则需要在 create 中定义获取数据方法。如果不需要，则前端在 data 中将 xxxOptions 定义约定好的数据，
   eg:

   // 初始化 xxxOptions, 如果不需要通过请求后端获取数据，则将其定义为固定值，需要时修改，否则可定义为 [] 空数组
        cxxxxxxIdOptions: [{dictLabel: 'XX1', dictValue: '0'}, {dictLabel: 'XX2', dictValue: '1'}]
   
        // 查询渠道代码字典 对应 cxxxxxxId 字段
        this.getDicts('channel_code').then((response) => {
            this.cxxxxxxIdOptions = response.data;
        });
   

3. 重置表单、重置查询表单时初始化该字段为数组类型。

   reset(){
       (this.form = {
         cxxxxxxId: [],
     });
   }
   

4. 当查看详情与编辑详情公用同一个 dialog 组件时，需要在重置 dialog 时同时将相应的标记变量初始化。

   flagReset() {
     this.checkAllCxxxxxxId = false;
     this.checkedCxxxxxxId = [];
     this.isIndeterminateCxxxxxxId = false;
   }
   

5. 弹出层表单 渠道代码 字段 多选框控制方法

   // 全选状态切换的方法
     handleCheckAllCxxxxxxIdChange(val) {
       this.checkedCxxxxxxId = val ? this.cxxxxxxIdOptions : [];
       if (this.checkedCxxxxxxId.length === this.cxxxxxxIdOptions.length){
         let temp = [];
         for (let i = 0; i < this.cxxxxxxIdOptions.length; i++){
           temp.push(this.cxxxxxxIdOptions[i].dictLabel);
         }
         this.form.cxxxxxxId = temp;
       } else {
         this.form.cxxxxxxId = [];
       }
       this.isIndeterminateCxxxxxxId = false;
       console.log("handleCheckAllChange: " + this.checkAllCxxxxxxId);
       console.log(this.form.cxxxxxxId);
       console.log(this.checkedCxxxxxxId);
     },
     // 控制多选框与全选框联动方法
     handleCheckedCxxxxxxIdChange(value) {
       let checkedCount = value.length;
       console.log("----------handleCheckedCxxxxxxIdChange-----------");
       console.log(value);
       this.checkAllCxxxxxxId = checkedCount === this.cxxxxxxIdOptions.length;
       console.log(this.checkAllCxxxxxxId);
       this.isIndeterminateCxxxxxxId = checkedCount > 0 && checkedCount < this.cxxxxxxIdOptions.length;
     },
   

6. 在 getList 方法中将对应字段的数据转换为符合多选框的数据格式。

   /** 查询政策规则列表 */
   getList() {
   this.loading = true;
   listsxxxxxxes(this.queryParams).then((response) => {
     this.sxxxxxxesList = response.rows;
     // 将 cxxxxxxId 字段中的字符串转变为 数组，用来处理多选情况
     let sxxxxxxesCopy = [];
     for (let sxxxxxxe of this.sxxxxxxesList){
       // 此处将获取到该字段中的值，不论是字符串数组还是数字数组，还是单独的字符串，统一都转变为字符串数组，需要注意的是，
       // 同时需要将该字段对应的字典查询的数据中的 value 统一也转为字符串
       // 如果 getDicts 方法获取到的数据中 dictValue 中存的是数字，数据库中该字段中也存的是数字，则应在此处将字符串数组转变为数字类型数组
       // 可以使用 ['1','2','3'].map(Number)  ---> [1,2,3] 直接转变
       sxxxxxxe.cxxxxxxId = sxxxxxxe.cxxxxxxId.toString().split(','); // 注意， 获取 list 后将字段中的字符串转变为 数组
       sxxxxxxe.store = sxxxxxxe.store.toString().split(',');// 注意， 该字段在数据库中存放的是 value 1 还是 lable 'jmj', 前端获取到的是字符串'1', 还是数字 1
       sxxxxxxesCopy.push(sxxxxxxe);
     }
     this.sxxxxxxesList = sxxxxxxesCopy;
     this.total = response.total;
     this.loading = false;
     });
   },
   

7. el-dialog 的 form 表单中该字段设置

   <el-row>
        <el-col :span="24">
            <el-form-item label="渠道编码" prop="cxxxxxxId">
                <!--<el-input v-model="form.cxxxxxxId" placeholder="请输入渠道编号" :readonly="readonly"/>-->
                <!--<el-select v-model="form.cxxxxxxId" placeholder="请选择渠道编码" multiple :disabled="disabled">
                    <el-option v-for="(item) in cxxxxxxIdOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"/>
                </el-select>-->
                <el-checkbox :indeterminate="isIndeterminateCxxxxxxId" v-model="checkAllCxxxxxxId" v-on:change="handleCheckAllCxxxxxxIdChange" :disabled="disabled">
                    全选
                </el-checkbox>
                <el-checkbox-group  v-model="form.cxxxxxxId" v-on:change="handleCheckedCxxxxxxIdChange" class="checkGroupInlin" :disabled="disabled">
                    <el-checkbox v-for="(item) in cxxxxxxIdOptions" :label="item.dictValue" :key="item.dictValue" >
                        <!--:value="item.dictValue"-->
                        {{item.dictLabel}}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-col>
    </el-row>
   

8. 为全选+多选框组添加样式，使其展示在同一行中

   <style>
            .checkGroupInlin {
                display: inline;
                margin-left: 24px;
            }
        </style>
   

9. 修改 dialog 中使用了全选+多选框组出现数据回显错误，多选框失效的问题是因为在打开 dialog 时，回显的数据中该字段的数据和多选框组组件绑定的变量不匹配导致。需要将该字段中的数据转换为多选框组绑定的变量可用的数据结构。

               getDownclassPolicy(downclassPolicyId).then((response) => {
                    this.form = response.data;
   
                    this.form.channelId = this.form.channelId.toString().split(','); // 将 channelId 中的字符串解析为数组，以便多选框使用
                    this.form.storeCode = this.form.storeCode.toString().split(',');
                    if (this.form.channelId.length > 0 || this.form.channelId.length < this.channelIdOptions.length){
                        this.isIndeterminateChannelId = true;
                    } else {
                        this.isIndeterminateChannelId = false;
                    }
                    if (this.form.storeCode.length > 0 || this.form.storeCode.length < this.storeCodeOptions.length){
                        this.isIndeterminateStore = true;
                    } else {
                        this.isIndeterminateStore = false;
                    }
                    console.log('-------handleUpdate------');
                    console.log(this.form.storeCode)
   
                    this.open = true;
                    this.title = '修改降舱规则';
                });