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

今天药忘吃喽~ 2023-10-05 08:02 23阅读 0赞

## 场景 ##

ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/107838848][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_107838848]

上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。

但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。

![2020081014532198.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

原因 下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新。

@change="$forceUpdate()"

添加位置如下

<el-select
                    v-model="form.bcArray"
                    placeholder="请选择班次"
                    multiple
                    clearable
                    @change="$forceUpdate()"
                    :style="{ width: '200px' }"
                  >
                    <el-option
                      v-for="dict in bcalldata"
                      :key="dict.bcbh"
                      :label="dict.bcmc"
                      :value="dict.bcbh"
                    />
                  </el-select>

更改之后

![20200810145427232.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_107838848]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107838848
[2020081014532198.gif]: https://img-blog.csdnimg.cn/2020081014532198.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[20200810145427232.gif]: https://img-blog.csdnimg.cn/20200810145427232.gif