elementui中多选下拉框 multiple属性时 编辑表单如何显示默认值问题解决 以及校验验证问题

首先 这是点击编辑以后 期待的样子
elementui中多选下拉框 multiple属性时 编辑表单如何显示默认值问题解决 以及校验验证问题_第1张图片

但是使用过程中出现了不现实的问题 之后找到了问题所在
这个下拉框的value是这种样子的【1,2,3,4】
给到数据库的时候我给他去掉了中括号变成了字符串就是这样子 1,2,3,4
所以 拿到前台的时候他依旧是个字符串 我们要把它变成一个数组

this.editForm.hospitalId = row.hospitalId.split(',').map(Number);

我把我代码放上来

点击编辑时代码

 //表格编辑事件
            editClick:function(row)//加载下拉框
                this.loadingOption();
                this.title="编辑"
                this.disabled=true;
                this.goUrl="/qxgl/update";
                this.editFormVisible = true;
                this.editForm = row;
                this.editForm.hospitalId = row.hospitalId.split(',').map(Number);//加上这句话

            },

下拉框代码:

			<el-form-item label="医院">
                     <el-select  v-model="addForm.hospitalId"
                            multiple
                            default-first-option
                            placeholder="请选择">
                    <el-option
                            v-for="item in options3"
                            :key="item.hospitalId"
                            :label="item.hospitalName"
                            :value="item.hospitalId"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

校验:

hospitalId: [
                    { validator: function (rule, value, callback) {
                            if (vm.editForm.hospitalId.length === 0) {
                                callback(new Error('请选择医院'));
                            } else {
                                callback();
                            }
                        }
                     }
                ],

你可能感兴趣的:(vue,elementui)