Select multiple selection problem in element ui

question

When using selectthe drop-down box for multiple selection, when editing the user role, the editing interface assigns a value to selectthe drop-down box . There is a problem with the selected data, and the value in the input box cannot correspond to the value of the drop-down box. As shown in the picture:model

reason

The value type of the user role obtained by clicking the edit button is stringtype. This drop-down box component needs to match the array type, so the matching type is inconsistent and the data cannot be matched.

solve

<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;
},

The data source in the drop-down box roleDatais an array, and the selected value is also an array. However, when storing in the backend, it is converted into a string and stored in the database, so the return value obtained from the backend in the editing interface is a string. The first choice is to convert the string into an array and bind it to the property selectof v-model( 注意：选中的值就是下拉框数据源中的serial).

@change="$forceUpdate()"This is a forced refresh

Then when submitting, convert this array into a string, assign it to the specified field in the background and pass it to the background, and you're done.