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

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

        <el-select style="width: 100%" 
          ref="testCode"
          v-model="dialogFormData.codes"
          multiple filterable remote 
          :remote-method="codesRemoteMethod">
          <el-option
            v-for="item in codesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-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]
          }) 
        })

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

        <el-select 
          ref="staffCode"
          v-model="dialogFormData.staffCode" 
           filterable
          remote 
          :remote-method="staffCodeRemoteMethod">
          <el-option
            v-for="item in staffCodeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        // 用户点击编辑弹出对话框后,远程回显
        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 = []
      }
    },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容