關於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。這樣多選器裏的數據就能正常返顯了。
最後，真的感謝萬能的網友。