Element-UI中的el-select中多选回显数据后没法重新选择和更改

最新推荐文章于 2024-02-20 17:02:13 发布

原创最新推荐文章于 2024-02-20 17:02:13 发布 · 2.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript #vue

在Vue应用中，使用el-select组件进行多选时，如果在编辑模式下给v-model绑定的数组重新赋值以实现回显数据，可能会遇到无法再次更改选择项的问题。通过在change事件中调用$forceUpdate()方法，可以强制组件更新，从而恢复选择项的可编辑性。

出现场景：

el-select多选在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。

解决办法：

@change="$forceUpdate()"

具体实例如下

<el-form-item label="项目成员：" prop="userId">
    <el-select
        v-model="setForm.userIdList"
        filterable
        multiple
        @change="$forceUpdate()"
    >
        <template v-for="item in userlist">
            <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
        </template>
    </el-select>
</el-form-item>