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

现在使用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" filterable remote :remote-method="remoteMethod" :loading="loading" :clearable="true" placeholder="请输入国内城市名称/国外国家名称">
            <Option v-for="(option, index) in optionsArea" :value="option.value" :key="index">{{option.areaRegion}}</Option>
          </Select>
          </Col>
          <Col span="10" class="pl-10">{{city_info}}</Col>
        </Row>
</FormItem>

这里我原本的想法是，每次打开模态框是，为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;
      });
    }

亲测，有效！