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

小半 • 2023年2月11日上午11:26 • 技术随笔 • 阅读 256

在开发过程中, 总会做到修改功能, 但是在修改回显的时候, 发现下拉框始终回显的是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>

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

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/98668.html

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

相关推荐