【知识整理】iview远程搜索选择框，删除后再次打开不显示的bug

最新推荐文章于 2021-06-22 10:54:24 发布

原创

最新推荐文章于 2021-06-22 10:54:24 发布 · 5.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #前端 #vue #vue.js #iview

在使用iview的远程搜索选择框时遇到一个问题：当在模态框内删除选择内容并关闭模态框后，再次打开模态框，选择框无法显示原有值。尽管尝试为Select组件的label属性重新赋值，但并未奏效。经过研究iview的文档和相关资料，最终决定直接操作vue编译后的input输入框，通过设置input的value属性为原值来解决这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在使用iview的远程搜索选择框时需要到了这样一个问题，输入框在一个模态框里，打开模态框删除选择框中的内容时，关闭模态框，再次打开模态框时无法为选择框赋上原来的值。查了很多资料也没找到原因，这应该是iview的一个bug。

删除前显示模态框时，远程搜索选择框显示的内容如下图，不了解iview远程搜索输入框的盆友，请移步https://www.iviewui.com/components/select

现在假设用户点击选择框右侧的删除按钮删除了已选择的内容，删除后再次显示模态框时，远程搜索选择框显示如下图：

我们发现删除后再次显示模态框时，远程搜索选择框默认显示的内容不再显示！

代码如下

 <FormItem label="地域" prop="area" :error="form.validator.api.area">
        <Row>
          <Col span="14">
          <Select :label="areaLabel" v-model="form.items.areaRegionId"