最近遇到一个需求。先来讲一下需求 运费模板问题。 三级联动 用的el-cascader-panel 的级联面板 省市区
有一个区域设置，停发物流，停发原因，操作
区域设置的内容是根据三级联动框的内容改变。
我全选北京市后 上面的显示 只显示【北京市】 不显示 北京市 市辖区 什么什么区
如果没有全选北京市
就让变成这样
北京市市辖区东城区，北京市市辖区西城区 以此类推~~~~~
这就遇到难题了。因为这个级联面板的原因 没选中一个数据的话是 不管你在第几级的的，
看你这个一级或者二级 再或者三级选中没有，
假设 我们选中了一级， 剩下的二级和三级肯定是全选的是吧，
如果选中 二级 的话 三级的所有内容是全选的是吧， 一级的数据是非选中的，二级的同类是非选中的 对吧
不多说 需求了解完毕之后， 开整。看代码
**大体分为这几个步骤
**
1.首选获取选中数据 进行拆分成树状结构的数据，
{ children: [ { label: '南京市', loaded: false, checked: true, value: '320100', children:[ {label: '玄武区',value: '320102',loaded: false, checked: true} ] }, ], label: '江苏省', loaded: false, value: '320000', checked: false }
*就类似上面的 树状结构数据，
2. 进行处理这个树状结构的数据 然后放到tag标签进行渲染，
3. 还要在处理一份树状结构数据，处理成 省一个数组 市一个数组，区一个数组。
大体分为以上步骤
上面的 蓝色标签是用tag 来写的，下面的 级联面板是 用element的
el-cascader-panel 里面方法 @change 是选中后触发这个方法。 v-model 是回显输送来使用。
上面的图片是进行处理 你选中的数组。arrdatahx 定义为空数组，如果等level==1 直接添加 不墨迹
if (e.level == 1) {
arrdatahx.push(e);
} else if (e.level == 2 ){
let paVal = e.parent.value;
let fin = arrdatahx.findIndex((i) => {
return i.value == paVal;
});
if (fin == -1) {
arrdatahx.push(e.parent);
}
console.log(e, 'e==2')
const arrdata1 = []
}else if(e.level==3){
let paVal = e.parent.parent.value;
let fin = arrdatahx.findIndex((i) => {
return i.value == paVal;
});
if (fin == -1) {
arrdatahx.push(e.parent.parent);
}
}
上面的代码是进行 选中第几级的数据，
这是处理 树状结构 转成tag的数据 进行渲染展示
let Fpro = [];
arrdatahx.forEach((e) => {
if (!e.checked) {
e.children.forEach((e1) => {
if (!e1.checked) {
e1.children.forEach((e2) => {
if (e2.checked) {
Fpro.push({
value: e2.value,
label: e.label + e1.label + e2.label,
});
}
});
} else {
Fpro.push({
value: e1.value,
label: e.label + e1.label,
});
}
});
} else {
Fpro.push({
value: e.value,
label: e.label,
});
}
});
console.log("Fpro", Fpro);
this.magtag = Fpro
magtag 对应的是tag里面循环渲染 这是把数据先转换成可视化数据，tag可以看得到的你选中的数据，
下一步就要处理选中的处理数据 进行回显咯。。
arrelca.forEach((e, index) => {
// console.log(e)
if (e.level == 1) {
arrdatahx.push(e);
} else if (e.level == 2 ){
let paVal = e.parent.value;
let fin = arrdatahx.findIndex((i) => {
return i.value == paVal;
});
if (fin == -1) {
arrdatahx.push(e.parent);
}
console.log(e, 'e==2')
const arrdata1 = []
arrpurre.push({
children: funchildren(e),
label: e.parent.label,
loaded: e.parent.loaded,
value: e.parent.value,
checked: e.parent.checked
})
function funchildren(val1) {
arrdata1.push({
label: val1.label,
loaded: val1.loaded,
checked: val1.checked,
value: val1.value,
children:funct(val1.children)
})
console.log('arrdata1',arrdata1);
function funct(vaa){
let adrr = []
adrr.push({
label: vaa.label,
loaded: vaa.loaded,
checked: vaa.checked,
value: vaa.value,
})
return adrr
}
return arrdata1
}
}else if(e.level == 3){
let paVal = e.parent.parent.value;
let fin = arrdatahx.findIndex((i) => {
return i.value == paVal;
});
if (fin == -1) {
arrdatahx.push(e.parent.parent);
}
// console.log('e3',e);
arrd.push({
children: funchildren(e.pathNodes[1]),
label: e.pathNodes[0].label,
loaded: e.pathNodes[0].loaded,
value: e.pathNodes[0].value,
checked: e.pathNodes[0].checked
})
function funchildren(e1){
let acxc = []
acxc.push({
children: funchilxx(e.pathNodes[2]),
label: e1.label,
loaded: e1.loaded,
value: e1.value,
checked: e1.checked
})
return acxc
}
function funchilxx (e2){
let addc = []
addc.push({
label: e2.label,
loaded: e2.loaded,
value: e2.value,
checked: e2.checked
})
return addc
}
// console.log('arrd',arrd);
}
这是里处理 省市区的各个数组因为需求是 省一个数组 市一个数组，区一个数组。
let sheng =[]
let shi = []
let qu = []
arrd.forEach((e,index)=>{
if(sheng.indexOf(Number(e.value) )==-1){
sheng.push(Number(e.value) )
}
e.children.forEach(e1=>{
if(shi.indexOf(Number(e1.value))==-1){
shi.push(Number(e1.value) )
}
e1.children.forEach(e2=>{
if(qu.indexOf(Number(e2.value))==-1){
qu.push(Number(e2.value))
}
})
})
})
最后处理出来的数据 是这样的，
省市区 三个数组，所有ID 这是传送给后端的数据，
但是这些数据 不能进行回显数据，
所以我还要处理这些数据 让这些数据 进行串联，链接。找附属关系。。。。 想想都头皮发麻！！！！
这是处理 省市区数据 跟本地数据地址库的数据进行比对，
因为这个级联面板的话 回显数据是 ['110000', '110114','00415'], 前面是省市区 一个数组包含三个ID才能回显出来你要的数据。
所以上面的 数据要处理成这样才能结尾。
这是处理省市区数据的代码
最终处理完数据 跟这个el-cascader-panel级联面板 的绑定数据 表示回显。。 到现在算是对这个级联面板的全部操作 完毕了。。
回想一下 这几个步骤 ，大体的思路 是 选中数据，获得选中的数据，完成对tag的回显，在处理选中的数据，对后端数据的传输，在通过 后端的数据 进行编辑回显。。。。大体的流程！！
到现在算是结束了， 感谢两位大佬！【@毕方】【@文庆】 对我的指点 本人小菜鸡一枚。 如果发现比我更好的方法 不要吝啬哦~~~~~~~~ 或者有大佬 相互交流~~
