关于element的select多选选择器,数据回显的问题
关于element的select多选,数据回显的问题
在工作中遇到这样一个问题,新建表单时用element的select多选以后,在编辑的时候打开表单发现其他数据能正常显示,多选却无法正常回显。在网上找了很多后,终于解决了这个问题,下面把百度的方法总结一下。
首先:表单中
<el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option placeholder="请选择接收部门"> <el-option v-for="item in deptData" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select>
其次,methods中这样写:
// 编辑 handleEdit(data){ this.textShow=true; this.textForm=data; this.changeSelect(data); //触发此方法 }, changeSelect(data){ let UserIds=data.receUserIds.toString(); let peoData=UserIds.split(','); for(var i=0;i<peoData.length;i++) { peoData[i]=parseInt(peoData[i]); } this.textForm.receUserIds=peoData; let DetptIds=data.receDeptIds.toString(); let dpData=DetptIds.split(','); for(var i=0;i<dpData.length;i++) { dpData[i]=parseInt(dpData[i]); } this.textForm.receDeptIds=dpData; },
总结:changeSelect方法是在打开编辑表单后,对select多选选择器返显内容作处理的方法。
定义数组UserIds,将拿到的数据先做一个toString后再赋值给UserIdS(不这样做,直接赋值的话,控制台会一直报split不是一个函数的错误)。
用split方法将UserIds转换为逗号分隔的数组,对peoData作循环操作,每个元素去除双引号(parseInt方法转一下就好)。最终赋值给receUserIds。这样多选器里的数据就能正常返显了。
最后,真的感谢万能的网友。
相关推荐
专注前端开发 2020-10-21
苏康申 2020-11-13
vitasfly 2020-11-12
oraclemch 2020-11-06
liuyang000 2020-09-25
FellowYourHeart 2020-10-05
赵继业 2020-08-17
whyname 2020-08-16
Seandba 2020-08-16
dbasunny 2020-08-16
拼命工作好好玩 2020-08-15
langyue 2020-08-15
写程序的赵童鞋 2020-08-03
Accpcjg 2020-08-02
tydldd 2020-07-30
好记忆也需烂 2020-07-28