element cascader 动态增减标单项（省市区）

在开发到cascader联级的时候遇到一些问题，特此记录

循环遍历联级组件

实现页面功能为上图，点击添加可以添加很多个【*代理区域】，这个功能特别好实现，难点在于的是如何和后台交互并且可以实现回显的功能。
后台要的值是以逗号区分的一列字符串，可是我们添加多个的时候，前端提交的是数组，那我们就需要坐下数组处理，可是所有的值如果都是逗号区分的话，一会儿回显我们无法区分，所以我们需要更改一下数据格式 
    原有数据        一级，二级，三级，一级，二级，三级
    现有数据        一级，二级，三级；一级，二级，三级

仔细看，我们用 “ ；”来区分是代表相对应的数据，那如果处理

let ids = []; // 定义空数组
this.agentVisibleForm.domains.forEach(ele => { // 循环遍历
    if(Array.isArray(ele.id)) {
        ele.id = ele.id
        ids.push(ele.id.join(",")) // 先以逗号区分并且推到 ids 里
    }
})
ids = ids.join(";") // 拿到之后我们再以 ; 分割

 到这里我们的提交就搞定了，那回显怎么办呢，在编辑的时候，我们需要对于后台返回的值进行处理

// data.regionIds 就是后台返回的值
// 后台返回的格式为 一级，二级，三级;一级，二级
// 需要先把 ; 拆分开

let demo = data.regionIds.split(';')


// 然后再拆分,数组里的值应该为number，转化一下
for(let i = 0; i < demo.length; i++){
 demo[i] = demo[i].split(',').map(Number);
};

进行数据处理完毕后，我们开始赋值，在这里遇到一个问题：

this.agentVisibleForm.domains = demo; // 正常这么赋值就ok了

可是我们在上面组件循环的时候

多了个id，所以应该是

// 给每一个数组加 id 的前缀。
demo.map(i => {
    return{
        id: i
    }
})

至此我们的功能就实现了。