Vue进阶（幺捌幺）：elementUI 中 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>

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
},

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

二、拓展阅读

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