element中el-select绑定值为对象并回显问题

有件事想告诉你

已于 2022-03-03 16:58:41 修改

阅读量1.3w

点赞数 4

于 2022-03-03 16:25:26 首次发布

本文链接：https://blog.csdn.net/qq_42092195/article/details/123254624

版权

本文介绍了在Vue.js项目中使用Element UI的el-select组件遇到的绑定对象回显问题。当从后端获取数据时，尽管下拉框内显示出已选择的选项，但输入框未正确显示。解决方法包括确保el-select的绑定值与返回数据的key匹配，el-option的value使用`:value`绑定，并在回显时检查是否需要使用`$nextTick()`进行更新。

摘要由CSDN通过智能技术生成

问题描述及图片

问题图片
问题：添加时，有把选择的对象都发给后端。查看详情时，接口有返回对应数据，但是el-seleect 的input没有返显，下拉框里却有显示选中的选择

html

	<el-select v-model="clubObj" v-if="showClub" value-key="lineId" placeholder="请选择条线" clearable @change="selectChange">
		<el-option v-for="item in businessLineList" :key="item.lineId" :label="item.shortName" :value="item" />
	</el-select>

data

  data() {
      return {
	    showClub:false,//v-if="showClub"是返显的时候，先销毁，赋值数据后，重新渲染el-select的操作
        clubObj: {},//绑定的值是一个对象
        businessLineList: [],//下拉列表的数组
      }
    },

methods

methods: {
	//el-select 的选择事件
	selectChange(val) {
		//val 就是选中的对象
		this.childData.businessLineId = val.lineId//赋值给提交对象数据
		this.childData.businessLineName = val.shortName//赋值给提交对象数据
	},
	//获取el-select列表信息
	getLine() {
		//......接口对接
		//获取下拉列表信息
       this.businessLineList = res.data.data
	},
	// 获取详情并回显
	getDetailInfo() {
		//.......接口对接
		if (res.data.data) { //成功获取
			//接口返回数据并赋值
			//数据    res.data.data.businessLineId + ''   是使它变成字符串，确保数据是字符串
			this.$set(this.childData, 'businessLineId', res.data.data.businessLineId + '') //this.childData是提交给后端的数据对象 
            this.$set(this.childData, 'businessLineName', res.data.data.businessLineName) //this.childData是提交给后端的数据对象
            this.showClub = false //销毁el-select
            this.getLine() // 获取el-select 的列表
            // 数据被更新了，Vue.nextTick 就会触发            
            this.$nextTick(() => { 
              //this.$set 的目的是防止当对象（this.clubObj）更新了，视图层并没有更新该数据
              this.$set(this.clubObj, 'lineId', res.data.data.businessLineId + '')
              this.$set(this.clubObj, 'shortName', res.data.data.businessLineName)
              this.showClub = true //重新渲染el-select
            })
		}
	},
}

个人踩坑

这边注意的是
1、el-select中，value-key="lineId"
在官网中有表示：
在这里插入图片描述

2、el-option中 :value="item" 是有【 : 】的，且for循环是这样写的： v-for="item in businessLineList" :value="item"
item是作为一个对象
3、回显时，必须让后端给你返回 :key="item.lineId" :label="item.shortName" 中的lineId 和 shortName ，赋值给el-select 的绑定值v-model="clubObj"
4、关于是否使用 v-if="showClub" 销毁再渲染，看看其他设置完有没有问题且代码没问题，但是还是不能回显，不妨试一试。