关于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。如许多选器里的数据就可以一般返显了。
末了,真的谢谢全能的网友。

    原文作者:来一杯牛奶
    原文地址: https://segmentfault.com/a/1190000018204929
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞