iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >vue+elementUI下拉框回显问题如何解决
  • 456
分享到

vue+elementUI下拉框回显问题如何解决

2023-07-05 06:07:27 456人浏览 八月长安
摘要

本文小编为大家详细介绍“Vue+elementUI下拉框回显问题如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue+elementUI下拉框回显问题如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧

本文小编为大家详细介绍“Vue+elementUI下拉框回显问题如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue+elementUI下拉框回显问题如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

    vue elementUI下拉框回显问题

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

    下面看案例

    正确回显格式应该是这样

    vue+elementUI下拉框回显问题如何解决

    而回显的确实这个值的id

    vue+elementUI下拉框回显问题如何解决

    原因是因为在给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+elementUI下拉框回显问题如何解决”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网精选频道。

    --结束END--

    本文标题: vue+elementUI下拉框回显问题如何解决

    本文链接: https://www.lsjlt.com/news/349881.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    本篇文章演示代码以及资料文档资料下载

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档
    猜你喜欢
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作