element ui中的select多选问题

忘是亡心i 2024-04-01 04:28 53阅读 0赞

## 问题 ##

在使用`select`下拉框多选时，在编辑用户角色时，编辑界面为`select`下拉框的`model`赋值了，选择的数据有问题，输入框中的值不能与下拉框的值对应上。  
如图：  
![在这里插入图片描述][c8b3ac43b0724b6aa86c8203a6b045d6.png]  
![在这里插入图片描述][707c8026b8974bc8bcbb5983f148ccdc.png]

## 原因 ##

点击编辑按钮拿到的用户角色的值类型为`string`类型，这个下拉框组件需要匹配数组类型 所以匹配类型不一致导致数据对应不上

## 解决 ##

<el-select  ref="select" v-model="roles" placeholder="请选择用户角色" @change="$forceUpdate()" class="el-select" multiple clearable>
    	<el-option v-for="item in roleData" :label="item.role" :value="item.serial" :key="item.serial"></el-option>
    </el-select>

//编辑
    editBtn(row) {
        
        this.addForm = {
         ...row }
        console.log(row);
        let arr = []
        for(const data of row.resourceList) {
        
            arr.push(data.serial)
        }
        console.log(arr)
        
        this.roles = arr;
        
        this.titleName = '编辑'
        this.dialogVisible = true;
    },

下拉框中的数据源`roleData`是一个数组，选中后的值也是一个数组。但是在后端存储的时候是转换成字符串存到数据库中的，所以在编辑界面从后端获取的返回值是一个字符串，首选要把这个字符串转换成数组，绑定到`select` 的`v-model`属性上（`注意：选中的值就是下拉框数据源中的serial`）。

> `@change="$forceUpdate()"`这是强制刷新

![在这里插入图片描述][32b1a1b53cd94cd69d83ff8db5a63047.png]然后在提交的时候把这个数组转换成字符串赋给后台指定的字段传给后台就大功告成。

[c8b3ac43b0724b6aa86c8203a6b045d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/188eb99a57694e5e9ce50e9483a0a881.png
[707c8026b8974bc8bcbb5983f148ccdc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/49c7d9ed45ba4aeaa6ba5cc2f787724f.png
[32b1a1b53cd94cd69d83ff8db5a63047.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d4f60ee848a04d0b9a99e20e561f4b14.png