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 = []
      }
    },