首页 > 其他分享 >iView中Select无法自动填充值

iView中Select无法自动填充值

时间:2024-02-02 13:55:06浏览次数:14  
标签:填充 res let result tempJson factories queryData Select iView

  如下所示,使用的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();
		})
	  }
	  
	} 
  })
  
},

  

 

   

标签:填充,res,let,result,tempJson,factories,queryData,Select,iView
From: https://www.cnblogs.com/weiyanei/p/18003062

相关文章

  • WPS JS 宏根据单元格内容填充颜色
    WPSJS宏根据单元格内容填充颜色直接上代码/***Macro1Macro*宏由Steven录制,时间:2024/01/30*/functionSetCellColorsBYMacro(){ //获取表格的行数和列数varrowCount=48;varcolAll=['A','B','C','D','E',&......
  • DBeaver连接SqlServer报“The server selected protocol version TLS10 is not accept
    1、......
  • iview-input placeholder 样式修改
    /deep/.ivu-input::-webkit-input-placeholder{color:#87cfff;}/deep/.ivu-input::-moz-placeholder{/*MozillaFirefox19+*/color:#87cfff;}/deep/.ivu-input::-moz-placeholder{......
  • 002_公共字段公共填充
    每次进行增加员工或者修改员工之类,有关修改和新增的操作时,要对修改时间、新增时间、修改人、新增人这几个字段进行修改,代码比较重复。用切面,前置通知,对Mapper中的方法进行捕获。这些都是我们操作的对象中的字段,原本这些字段是在service的实现类中进行赋值。用注解进行标识,有@Aut......
  • Element Plus el-select el-tree-select 获取选中的label值
    select下拉框通过@change选择改变,轮巡方式根据id取name的值<el-form-itemlabel="企业类型"prop="entTypeId"><el-selectv-model="form.entTypeId"placeholder="请选择企业类型"style="width:220px"@change="entTypeCha......
  • 【C++】 select函数介绍
    在使用C++语言开发网络应用程序时,常常需要用到select函数。select函数是一种多路复用机制,可以同时监听多个文件描述符上可读、可写、异常等事件,从而让程序能够高效地处理多个连接。下面详细介绍C++中的select函数。1.select函数的定义和作用select函数的定义为:intselect(intn......
  • element select多选 选择一条数据后自动隐藏下拉选框
    <el-selectv-model="form.roleIds"placeholder="请选择角色"multiplemultiple-limit="1"@change="handleVisibleChange"ref......
  • channel和select
    channelChannel是基于有锁队列实现数据在不同协程之间传输的通道,本质上是由buf循环队列、sendq待发送者队列、recvq待接收者队列三个FIFO队列组成的用于协程之间传输数据的协程安全的通道,sendq和recvq可以认为不限大小。使用声明一个通道类型的变量是需要使用make()函数初始化......
  • [MySQL] 行级锁SELECT ... LOCK IN SHARE MODE 和 SELECT ... FOR UPDATE
    一、译文翻译来自官方文档:LockingReadsIfyouquerydataandtheninsertorupdaterelateddatawithinthesametransaction,theregularSELECTstatementdoesnotgiveenoughprotection.Othertransactionscanupdateordeletethesamerowsyoujustqueried.Inn......
  • Layui select实现赋值和主动触发选择时间,及radio实现可取消
    Layuiselect赋值,并主动触发选择事件//Layuiselect赋值,并主动触发选择事件//Input:selectId:ID选择器,selectFilter:lay-filter名称,value:需要的赋值,text:显示文本值functionsetSelect(selectId,selectFilter,value,text){//赋值$(selectId).find("option[va......