问题描述及图片

问题图片
问题:添加时,有把选择的对象都发给后端。查看详情时,接口有返回对应数据,但是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" 中 的lineIdshortName ,赋值给el-select 的绑定值v-model="clubObj"
4、关于是否使用 v-if="showClub" 销毁再渲染 ,看看其他设置完有没有问题且代码没问题,但是还是不能回显,不妨试一试。

涉及的知识

关于ElementUI el-select 绑定对象的探索

vue使用this.$nextTick()函数

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐