vue+elementUI下拉框回显问题及解决方式

 更新时间:2023年02月23日 17:15:19   作者:UnIQUE Eason  
这篇文章主要介绍了vue+elementUI下拉框回显问题及解决方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue elementUI下拉框回显问题

在开发过程中,总会做到修改功能,但是在修改回显的时候,发现下拉框始终回显的是id而不是文本

下面看案例

正确回显格式应该是这样

正确回显格式应该是这样

而回显的确实这个值的id

原因是因为在给select复制的时候没有重新渲染,一开始我的编辑回显方法是这样

// 编辑回显
    edit() {
    	// 通过选中id查询信息
      axios.get('/xxx/xxx/id', {
          params: { id: this.selectedRows[0].ID }
        }).then((reponse) => {
        // 然后直接赋值到表单上
          this.recordFrom = reponse.data.data[0]
        })
	   // 打开表单页面
      this.editRecordDialog = true
    }

直接将查询的数据赋值到表单中,只会赋值返回回来的值,如果v-model绑定的值是id,则只会显示id,如果绑定的值是name,则只会显示name。

所以,给表单赋值的时候需要重新渲染一下下拉框

给赋值之后下面增加了一个查询下拉框的方法

// 编辑回显
    edit() {
    	// 通过选中id查询信息
      axios.get('/xxx/xxx/id', {
          params: { id: this.selectedRows[0].ID }
        }).then((reponse) => {
        // 然后直接赋值到表单上
          this.recordFrom = reponse.data.data[0]
        })
       // 重新查询下拉框方法
       this.getNumber2()
	   // 打开表单页面
      this.editRecordDialog = true
    }

查询方法代码:

// 查询版本号到下拉框
    getNumber2() {
      axios.get('xxx/xxx/number', { 
      params: { id: this.proNameSelect } })
      .then((reponse) => {
        var obj = reponse.data.data
        for (var i = 0; i < obj.length; i++) {
          this.options5.push({ value: obj[i].ID, label: obj[i].versionNumber })
        }
      })
    }

这里附上下拉框的代码:

<el-form-item label="版本号" prop="verID">
 <el-select class="select-type" v-model="recordFrom.verID" placeholder="请选择版本号">
  <el-option v-for="item in options5" :key="item.ID" :label="item.versionNumber" :value="item.ID"> </el-option>
 </el-select>
</el-form-item>

重新渲染之后,就可以正常回显啦!

vue下拉框回显映射

大家在做项目的时候,应该非常的容易遇到,下拉框的回显问题吧?包括单选框,复选框,级联框的回显

如果使用组件的话,比如element-UI,他们内部有自己的映射方法,将id传过去自己能回显到下拉框中,还是挺方便的,可是如果给一个id 让你映射出他所对应的名字,你要怎么办呢?让我们一起来看看吧?

单选框

  • 后端返回的:
value: '选项1'
  • 下拉数组:
options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
// 映射方法
formatterName(options, value) {
  let obj = {}
  obj = options.find(item => item.value=== value)
  return obj.label
},  
// 输出:   黄金糕    

多选框

  • 后端返回的:
value: ['选项2,选项4']
  • 下拉数组:
options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
// 映射方法
formatterName(options, value, idArr = []) {
  if (typeof options=== 'object') {
     for (let i = 0; value[i] !== undefined; i++) {
       for (let j = 0; options[j] !== undefined; j++) {
         if (value[i] === options[j].value) {
           idArr.push(options[j].label)
         }
       }
     }
   }
   return idArr
},  
// 输出:   ['双皮奶','龙须面']

级联框

  • 后端返回的:
value: ['zhinan','shejiyuanze','fankui']
  • 下拉数组:
options: [{
  value: 'zhinan',
  label: '指南',
  children: [{
    value: 'shejiyuanze',
    label: '设计原则',
    children: [{
      value: 'yizhi',
      label: '一致'
    }, {
      value: 'fankui',
      label: '反馈'
    }, {
      value: 'xiaolv',
      label: '效率'
    }, {
      value: 'kekong',
      label: '可控'
    }]
  }]
// 映射方法
formatterName(options, value, idArr = []) {
  if (typeof options === 'object') {
    for (let i = 0; value[i] !== undefined; i++) {
      for (let j = 0; options[j] !== undefined; j++) {
        if (value[i] === options[j].value) {
          idArr.push(options[j].label)
        }
      }
    }
    for (let i = 0; options[i] !== undefined; i++) {
      this.formatterName(options[i].children, value, idArr)
    }
  }
  return idArr
},  
// 输出:   ['指南','设计原则','反馈']

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue项目通过network的ip地址访问注意事项及说明

    Vue项目通过network的ip地址访问注意事项及说明

    这篇文章主要介绍了Vue项目通过network的ip地址访问注意事项及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue package.json配置深入分析

    Vue package.json配置深入分析

    这篇文章主要介绍了Vue package.json配置,package.json是每个前端项目都会有的json文件,位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json
    2023-01-01
  • 关于Ant-Design-Vue快速上手指南+排坑

    关于Ant-Design-Vue快速上手指南+排坑

    这篇文章主要介绍了关于Ant-Design-Vue快速上手指南+排坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 解决vant的Toast组件时提示not defined的问题

    解决vant的Toast组件时提示not defined的问题

    这篇文章主要介绍了解决vant的Toast组件时提示not defined的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue项目使用node连接数据库的方法(前后端分离)

    vue项目使用node连接数据库的方法(前后端分离)

    这篇文章主要介绍了vue项目使用node连接数据库(前后端分离),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 在Vue中定义和调用过滤器的方法

    在Vue中定义和调用过滤器的方法

    过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化,这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下
    2023-09-09
  • 没有搭建脚手架时vue组件的使用方式

    没有搭建脚手架时vue组件的使用方式

    这篇文章主要介绍了没有搭建脚手架时vue组件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue3新特性之在Composition API中使用CSS Modules

    Vue3新特性之在Composition API中使用CSS Modules

    这篇文章主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 关于vue设置环境变量全流程

    关于vue设置环境变量全流程

    这篇文章主要介绍了关于vue设置环境变量全流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue2和Vue3中常用组件通信用法分享

    Vue2和Vue3中常用组件通信用法分享

    这篇文章主要为大家整理了Vue3的8种和Vue2的12种组件通信的使用方法,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,值得收藏
    2023-04-04

最新评论