您的位置:首页技术文章

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

【字号: 日期:2023-02-12 11:11:22浏览:13作者:猪猪
目录
  • 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 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
    },  
    // 输出:   ["指南","设计原则","反馈"]

    总结

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

    标签: JavaScript