vue+elementUI下拉框回显问题及解决方式
短信预约 -IT技能 免费直播动态提醒
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
},
// 输出: ['指南','设计原则','反馈']总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
