要素 ui の複数選択の問題

質問

select複数選択にドロップダウン ボックスを使用する場合、ユーザー ロールを編集するときに、編集インターフェイスはselectドロップダウン ボックスにmodel値を割り当てます。選択されたデータに問題があるため、入力ボックスの値は、入力ボックスの値に対応できません。ドロップダウンボックスの値。
図に示すように:

理由

編集ボタンをクリックして取得されるユーザー ロールの値の型はstringtype です。このドロップダウン ボックス コンポーネントは配列型と一致する必要があるため、一致する型が矛盾しており、データを一致させることができません。

解決

<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()"これは強制リフレッシュです

次に、送信時にこの配列を文字列に変換し、バックグラウンドの指定されたフィールドに割り当ててバックグラウンドに渡すだけで完了です。