iView中Select无法自动填充值

  如下所示,使用的iView组件,在Select标签中有两个Option,其中一个是全部选项,当点击全部的时候,就会选中所有的工厂,再次点击全部的时候,可以取消选择所有工厂,同时不影响单个点击工厂。

<Select :disabled="isUpdate == true" transfer multiple filterable clearable v-model="queryData.factories"
            :max-tag-count="12" :placeholder="$t('sys.base.selectPlaceholder')">
            <Option label="全部" :value='selectAllVa' @click.native='selectAll'></Option>
            <Option v-for="item in factoryList" :value="item.factory_id" :key="item.factory_id"
              :label="item.factory_name">
            </Option>
          </Select>
selectAll() {
      if (this.queryData.factories.length < this.factoryList.length) {
        this.queryData.factories = []
        this.factoryList.map((item) => {
          this.queryData.factories.push(item.factory_id)
        })
      } else {
        this.queryData.factories = []
      }
    },

         

         但是这里有一个问题,可以看到我使用了  disabled 这个属性,就是说在修改而不是新增时,让默认展示工厂名字,同时不可修改工厂,

 

       错误代码,如下图所示,findFactoryList是异步的,而js代码是顺序执行,也就是说在执行findFactoryList()方法时,其实已经走到tempJson里面去了。

init() {
  let ths = this;
  findFactoryList({
	need_contrl: true
  }).then(res => {
	let { result_code, result_msg } = res
	if (result_code === '0') {
	  this.factoryList = res.data
	} 
  })
  
  
  this.isUpdate = false;
  if (this.isUpdateM()) {
	let tempJson = JSON.parse(this.params.search_param_json);
      
	this.queryData.factories = tempJson.factory_ids;
	
      this.isUpdate = true;

	this.$nextTick(res => {
	  ths.preview();
	})
  }

},

  但如果下面这行代码没有,Select标签中只有一个Option是完全没问题,上述在findFactoryList执行完毕后会自动展示工厂名,而不是一片空白。

<Option label="全部" :value='selectAllVa' @click.native='selectAll'></Option>

     

        但偏偏有上面这行代码,有两个Option,其中一个还是v-for循环,理论上没问题,但确实有问题。

        不断的排查后,发现直接等待请求完后就可以,也就是等工厂返回了数据,那么没啥问题,就是如下代码,

init() {
  let ths = this;
  findFactoryList({
	need_contrl: true
  }).then(res => {
	let { result_code, result_msg } = res
	if (result_code === '0') {
	  this.factoryList = res.data
	  
	  
	  this.isUpdate = false;
	  if (this.isUpdateM()) {
		let tempJson = JSON.parse(this.params.search_param_json);

		// console.log(tempJson)

		this.report_name = this.params.report_name
		this.queryData.period_times = [];
		this.queryData.period_times.push(tempJson.start_time);
		this.queryData.period_times.push(tempJson.end_time);

		this.queryData.factories = tempJson.factory_ids;

		this.queryData.info_id = tempJson.info_id;


		this.isUpdate = true;

		this.$nextTick(res => {
		  ths.preview();
		})
	  }
	  
	} 
  })
  
},

  

 

   

posted @ 2024-02-02 13:53  伟衙内  阅读(19)  评论(0编辑  收藏  举报