Vue进阶（幺捌幺）：elementUI 中 select 多选，数据回显错误的问题解决方法_element select多选第一次回显不上,点击别的输入框回显正常(2)

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

<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。回显问题解决。

二、拓展阅读

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

题以及学习路线给大家**

[外链图片转存中…(img-BbpWTdhg-1715842613050)]

[外链图片转存中…(img-mAXGvE2J-1715842613051)]