element-UI select下拉框 远程查询 编辑回显问题解决

多选下拉框:解决下拉框远程查询回显展示不正确的问题

        
          
          
        
        // data: 从table中传给dialog的对应行数据row
      const { names, codes } = data
        // 解决远程展示value不是label的问题
        names.map((item, index) => {
        // 获取到对应的refs元素,然后往其中的cachedOptions去push对象,将需要回显对应的label与value值存入
          this.$refs.testCode.cachedOptions.push({
            currentLabel: item,
            currentValue: codes[index],
            label: item,
            value: codes[index]
          }) 
        })

单选下拉框:解决下拉框远程查询回显展示不正确的问题

        
          
          
        
        // 用户点击编辑弹出对话框后,远程回显
        this.$refs.staffCode.cachedOptions.push({
          currentLabel: staffName,
          currentValue: staffCode,
          label: staffName,
          value: staffCode
        }) 

// 远程调用方法
    async staffCodeRemoteMethod(value) {
      if(value !== '') {
        const { result } = await $webApi.staffCodeRemote({ keyWord: value })
        this.staffCodeOptions = (result || []).map(({ staffName, staffCode}) => ({
          label: staffName,
          value: staffCode
        }))
      } else {
        this.staffCodeOptions = []
      }
    },

你可能感兴趣的:(element-UI select下拉框 远程查询 编辑回显问题解决)