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

倾听冷暖丿

vue elementUI下拉框回显问题

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

正确回显格式应该是这样

而回显的确实这个值的id

原因是因为在给select复制的时候没有重新渲染，一开始我的编辑回显方法是这样

1. // 编辑回显
   
2.     edit() {
   
3.             // 通过选中id查询信息
   
4.       axios.get('/xxx/xxx/id', {
   
5.           params: { id: this.selectedRows[0].ID }
   
6.         }).then((reponse) => {
   
7.         // 然后直接赋值到表单上
   
8.           this.recordFrom = reponse.data.data[0]
   
9.         })
   
10.            // 打开表单页面
    
11.       this.editRecordDialog = true
    
12.     }

复制代码

直接将查询的数据赋值到表单中，只会赋值返回回来的值，如果v-model绑定的值是id，则只会显示id，如果绑定的值是name，则只会显示name。
所以，给表单赋值的时候需要重新渲染一下下拉框
给赋值之后下面增加了一个查询下拉框的方法

1. // 编辑回显
   
2.     edit() {
   
3.             // 通过选中id查询信息
   
4.       axios.get('/xxx/xxx/id', {
   
5.           params: { id: this.selectedRows[0].ID }
   
6.         }).then((reponse) => {
   
7.         // 然后直接赋值到表单上
   
8.           this.recordFrom = reponse.data.data[0]
   
9.         })
   
10.        // 重新查询下拉框方法
    
11.        this.getNumber2()
    
12.            // 打开表单页面
    
13.       this.editRecordDialog = true
    
14.     }

复制代码

查询方法代码：

1. // 查询版本号到下拉框
   
2.     getNumber2() {
   
3.       axios.get('xxx/xxx/number', {
   
4.       params: { id: this.proNameSelect } })
   
5.       .then((reponse) => {
   
6.         var obj = reponse.data.data
   
7.         for (var i = 0; i < obj.length; i++) {
   
8.           this.options5.push({ value: obj[i].ID, label: obj[i].versionNumber })
   
9.         }
   
10.       })
    
11.     }

复制代码

这里附上下拉框的代码：

1. <el-form-item label="版本号" prop="verID">
   
2. <el-select class="select-type" v-model="recordFrom.verID" placeholder="请选择版本号">
   
3.   <el-option v-for="item in options5" :key="item.ID" :label="item.versionNumber" :value="item.ID"> </el-option>
   
4. </el-select>
   
5. </el-form-item>

复制代码

重新渲染之后，就可以正常回显啦！

vue下拉框回显映射

大家在做项目的时候，应该非常的容易遇到，下拉框的回显问题吧？包括单选框，复选框，级联框的回显
如果使用组件的话，比如element-UI，他们内部有自己的映射方法，将id传过去自己能回显到下拉框中，还是挺方便的，可是如果给一个id 让你映射出他所对应的名字，你要怎么办呢？让我们一起来看看吧？

单选框

• 后端返回的：
  

1. value: '选项1'

复制代码

• 下拉数组：
  

1. options: [{
   
2.           value: '选项1',
   
3.           label: '黄金糕'
   
4.         }, {
   
5.           value: '选项2',
   
6.           label: '双皮奶'
   
7.         }, {
   
8.           value: '选项3',
   
9.           label: '蚵仔煎'
   
10.         }, {
    
11.           value: '选项4',
    
12.           label: '龙须面'
    
13.         }, {
    
14.           value: '选项5',
    
15.           label: '北京烤鸭'
    
16.         }],
    
17. // 映射方法
    
18. formatterName(options, value) {
    
19.   let obj = {}
    
20.   obj = options.find(item => item.value=== value)
    
21.   return obj.label
    
22. },  
    
23. // 输出:   黄金糕    

复制代码

多选框

• 后端返回的：
  

1. value: ['选项2,选项4']

复制代码

• 下拉数组：
  

1. options: [{
   
2.           value: '选项1',
   
3.           label: '黄金糕'
   
4.         }, {
   
5.           value: '选项2',
   
6.           label: '双皮奶'
   
7.         }, {
   
8.           value: '选项3',
   
9.           label: '蚵仔煎'
   
10.         }, {
    
11.           value: '选项4',
    
12.           label: '龙须面'
    
13.         }, {
    
14.           value: '选项5',
    
15.           label: '北京烤鸭'
    
16.         }],
    
17. // 映射方法
    
18. formatterName(options, value, idArr = []) {
    
19.   if (typeof options=== 'object') {
    
20.      for (let i = 0; value[i] !== undefined; i++) {
    
21.        for (let j = 0; options[j] !== undefined; j++) {
    
22.          if (value[i] === options[j].value) {
    
23.            idArr.push(options[j].label)
    
24.          }
    
25.        }
    
26.      }
    
27.    }
    
28.    return idArr
    
29. },  
    
30. // 输出:   ['双皮奶','龙须面']

复制代码

级联框

• 后端返回的：
  

1. value: ['zhinan','shejiyuanze','fankui']

复制代码

• 下拉数组：
  

1. options: [{
   
2.   value: 'zhinan',
   
3.   label: '指南',
   
4.   children: [{
   
5.     value: 'shejiyuanze',
   
6.     label: '设计原则',
   
7.     children: [{
   
8.       value: 'yizhi',
   
9.       label: '一致'
   
10.     }, {
    
11.       value: 'fankui',
    
12.       label: '反馈'
    
13.     }, {
    
14.       value: 'xiaolv',
    
15.       label: '效率'
    
16.     }, {
    
17.       value: 'kekong',
    
18.       label: '可控'
    
19.     }]
    
20.   }]
    
21. // 映射方法
    
22. formatterName(options, value, idArr = []) {
    
23.   if (typeof options === 'object') {
    
24.     for (let i = 0; value[i] !== undefined; i++) {
    
25.       for (let j = 0; options[j] !== undefined; j++) {
    
26.         if (value[i] === options[j].value) {
    
27.           idArr.push(options[j].label)
    
28.         }
    
29.       }
    
30.     }
    
31.     for (let i = 0; options[i] !== undefined; i++) {
    
32.       this.formatterName(options[i].children, value, idArr)
    
33.     }
    
34.   }
    
35.   return idArr
    
36. },  
    
37. // 输出:   ['指南','设计原则','反馈']

复制代码

总结

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

来源:https://www.jb51.net/article/276285.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！