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

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

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

【知识整理】iview远程搜索选择框,删除后再次打开不显示的bug_第1张图片

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

【知识整理】iview远程搜索选择框,删除后再次打开不显示的bug_第2张图片

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

代码如下

【知识整理】iview远程搜索选择框,删除后再次打开不显示的bug_第3张图片

 
        
          
          
          
          {{city_info}}
        

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

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

【知识整理】iview远程搜索选择框,删除后再次打开不显示的bug_第4张图片

后来我想,既然没办法通过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;
      });
    }
亲测,有效!

你可能感兴趣的:(Vue.js)