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

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

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

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

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

代码如下

 
        
          
          
            {{option.areaRegion}}
          
          
          {{city_info}}
        

这里我原本的想法是，每次打开模态框是，为Select组件的label属性重新赋值为原值，但是发现没任何效果。之后查了iview的文档也查了很多其他的资料，都没找到好的解决办法。

iview远程搜索选择框编译后的html代码如下：

后来我想，既然没办法通过iview提供的api解决，那么直接操作vue编译后的ipnut输入框，每次打开模态框时，设置input的value属性为原值是否可行呢？这里做了一些尝试：

 //显示基本信息模态框
    showBasicMsgModal() {
      //设置表单初始值
      this.$refs.kolBasisForm.form.items = Object.assign(
        {},
        this.basicModifyMsg
      );
      this.$nextTick(() => {
	//这里直接操作编译后input输入框，为其value属性赋值
        document.querySelector('.ivu-select-input').value=this.$refs.kolBasisForm.areaLabel;
      });
    }

亲测，有效！