关于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。这样多选器里的数据就能正常返显了。
最后，真的感谢万能的网友。