elementUI 使用 el-select 的远程搜索功能,导致数据无法回显怎么解决?

问题:

解决方法:
在数据初始化的时候将获取到的数据做进一步的处理,进行本地select组件的一个添加

const labels = [];
          const values = [];
          res.data.rows.forEach((ele) => {
            labels.push(ele.buildName);
            values.push(ele.buildCode);
          });

          this.$refs.select.cachedOptions = labels.map((label, index) => ({
            currentLabel: label,      	 //当前绑定的数据的label
            currentValue: values[index], //当前绑定数据的value
            label,                       //当前绑定的数据的label
            value: values[index],        //当前绑定数据的value
          }));

参考资料:

<el-select ref="selectDom" v-model="form.diagnosisIds" :remote-method="remoteMethod" placeholder="请选择" clearable filterable multiple remote @visible-change="templateTagChange">
  <el-option
    v-for="item in relationList"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  />
</el-select>

<script> export default {
  data: {
  	return {
  	  form: {
        diagnosisIds: [] // v-model 中绑定的值
      },
      relationList: [] // 下拉框的数据
    }
  },
  methods: {
    // 远程搜索方法,数据太多,不能直接渲染
    remoteMethod(query) {
      if (query !== '') {
        this.relationList = []
        this.loading = true
        // 这个方法可以做下节流处理,不需要一输入就发起请求,这里偷懒没有写
        getDiagnoseInfo({ diagnoseName: query }).then(res => {
          this.loading = false
          this.relationList = res.filter(item => {
            return item.name.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        })
      } else {
        this.relationList = []
      }
    },
    // 诊断选择器下拉框隐藏时触发事件,清空数据
    templateTagChange(val) {
      if (val === false) {
        this.relationList = []
      }
    }
  }
} </script> 

const ids = [] // 专门用来存放选项id的数据
const strs = [] // 专门用来存放选项name的数据
// res.tagMapList 为接口返回的id与name的集合数据
res.tagMapList.forEach(ele => {
  ids.push(ele.id)
  strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {
  this.form.diagnosisIds.push(ids[i]) // 给选择器v-model赋值,由于是支持多选的,所以会是一个数据
  // 给选择器的选项赋值,接可以自己匹配上name了
  this.relationList.push({
    id: ids[i],
    name: strs[i]
  }) 

const ids = []
const strs = []
res.tagMapList.forEach(ele => {
  ids.push(ele.id)
  strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {
  this.form.diagnosisIds.push(ids[i])
  this.$refs.selectDom.cachedOptions.push({
    currentLabel: strs[i],
    currentValue: ids[i],
    label: strs[i],
    value: ids[i]
  })
} 

参考链接:

  1. https://blog.csdn.net/weixin_53312997/article/details/124983389?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-124983389-blog-125002466.235v43pc_blog_bottom_relevance_base8&spm=1001.2101.3001.4242.2&utm_relevant_index=4

  2. https://www.jianshu.com/p/7dfcc05a419f

posted @   崛起崛起  阅读(2915)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示