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

来源：jb51　　时间：2023/2/24 9:06:32　　对本文有异议

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