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

目录

• vue elementUI下拉框回显问题
• 正确回显格式应该是这样
• 而回显的确实这个值的id
• vue下拉框回显映射
• 单选框
• 多选框
• 级联框
• 总结

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

总结

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

• Vue+elementUI下拉框自定义颜色选择器方式
• Vue+ElementUI实现从后台动态填充下拉框的示例代码
• vue+element开发使用el-select不能回显的处理方案

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！