怎么处置vue elementUI下拉框显示是id而不是文本
|
这篇文章主要介绍了“怎么解决vue elementUI下拉框显示是id而不是文本？”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么解决vue elementUI下拉框显示是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 elementUI下拉框显示是id而不是文本？”的文章就介绍到这了,更多相关的内容，小编将为大家输出更多高质量的实用文章！ （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
