在开发过程中,总会做到修改功能,但是在修改回显的时候,发现下拉框始终回显的是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 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>
重新渲染之后,就可以正常回显啦!
大家在做项目的时候,应该非常的容易遇到,下拉框的回显问题吧?包括单选框,复选框,级联框的回显
如果使用组件的话,比如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 }, // 输出: ["指南","设计原则","反馈"]
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。