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

目录

• vue elementUI下拉框回显问题
• 正确回显格式应该是这样
• 而回显的确实这个值的id
• vue下拉框回显映射
• 单选框
• 多选框
• 级联框
• 总结

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.datafor (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 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},  // 输出:   ["指南","设计原则","反馈"]

总结

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