Vue进阶（幺捌幺）：element中select多选，数据回显错误的问题解决方法

前言

在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。

表单代码如需：

<el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option @change="changeSelect" placeholder="请选择接收部门"> <el-option v-for="item in deptData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
</el-select>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

js逻辑代码如下：

// 编辑
handleEdit(data){
this.textShow=true;
this.textForm=data;
this.changeSelect(data);   //触发此方法
},

changeSelect(data){
	let UserIds = data.receUserIds.toString()
	let peoData = UserIds.split(',')
	peoData.foreach((item, index, peoData) => {
		peoData[index] = Number(item) + ''
	})
	// 或者按照如下逻辑
//	for(var i=0; i<peoData.length; i++)
//	{
// peoData[i]=parseInt(peoData[i]) + ''
//	}
	this.textForm.receDeptIds = dpData
},

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

总结：changeSelect方法是在打开编辑表单后，对select多选选择器回显内容作处理的方法。由于el-select绑定值为字符数组类型，通过定义数组UserIds，需将拿到的数据先做一个toString后再赋值给UserIdS（不这样做，直接赋值的话，控制台会一直报split不是一个函数的错误）。用split方法将UserIds转换为逗号分隔的数组，对peoData作循环操作，每个元素去除双引号（Number或parseInt方法转一下就好）并转为字符。最终赋值给receUserIds。回显问题解决。

拓展阅读

• 《Vue进阶（幺肆贰）：element ui中el-switch、el-radio使用注意事项》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/114529175