element-ui 多选级联cascader 选择器回显问题

大家在使用element-ui的时候肯定会遇到这样一个问题
就是在你使用级联选择器的时候，
假设后台给你的数据是1,3,6, 而你的的级联选择器选中后绑定的值可能是这样的 [[1],[2,3],[4,5,6]] ,它直接将所有的父级都保存下来了。所以我们前端在编辑的时候进行回显就很难受，还要处理一下。
今天是我带来的最笨的方法进行处理操作，话不多说直接看代码吧

条件：
1、后端接口需要的字段是interfaceCateId ,值是字符串类型 '1,2,3'
2、前端请求到的接口是interfaceCateId,值是字符串类型1,2,3或者数组形式[1,2,3]

<template>
    <div>
        <el-cascader
                v-model="bindCategoryIds"
                :options="categoryData"
                size="small"
                @change="changeClick"
                :props="{ multiple: true, checkStrictly: true, }"
                clearable></el-cascader>
    </div>
</template>

<script>
    export default {
        name: "cascader",
        data(){
            return{
                categoryData:[{
                    value: '1',
                    label: '指南',
                    children: [{
                        value: '2',
                        label: '设计原则',
                        children: [{
                            value: '3',
                            label: '一致'
                        }, {
                            value: '4',
                            label: '反馈'
                        }, {
                            value: '5',
                            label: '效率'
                        }, {
                            value: '6',
                            label: '可控'
                        }]
                    }]
                }, {
                    value: '7',
                    label: '组件',
                    children: [{
                        value: '8',
                        label: 'Basic',
                        children: [{
                            value: '9',
                            label: 'Layout 布局'
                        }, {
                            value: '10',
                            label: 'Button 按钮'
                        }]
                    }]
                }],
                bindCategoryIds:[],
                editFlagNum:0, //创建一个标识判断是否是编辑的时候
                interfaceCateId:'3,7,10' //需要向接口传递的ids（假设编辑时后台传给的是3,7,10）
            }
        },
        watch:{
            editFlagNum(newVal){
                if(newVal > 0){//判断是否为编辑的时候
                    let echoTreeArr = [];
                    let eachAry;
                    //回显分类value转为数组
                    if(typeof this.interfaceCateId == 'object'){
                        eachAry = this.interfaceCateId
                    }else if(typeof this.interfaceCateId == "undefined" ||  typeof this.interfaceCateId === null){
                        eachAry = []
                    }else{
                        eachAry = this.interfaceCateId.split(',')
                    }
                    let itemAry = [];//分类树组件，每一项的value数组

                    // 递归分类数据
                    let recursionCategory = (data) => {
                        let len = data.length;
                        for(let i = 0;i < len;i++){//循环data参数，匹配回显的value
                            itemAry.push(data[i].value);//构建分类树数组项,入栈
                            for(let j = 0;j < eachAry.length;j++){//遍历子节点分类value，拼凑成数组项value，并终止循环
                                if(eachAry[j] == data[i].value){//匹配到子节点value
                                    echoTreeArr.push(JSON.parse(JSON.stringify(itemAry)));//push进树分类数据
                                    eachAry.splice(j,1);//删除以匹配到的value
                                    break;
                                }
                            }

                            if(eachAry.length <= 0){//所有回显value匹配完成后，跳出循环
                                break;
                            }else if(data[i].children && data[i].children.length > 0){// 如果存在子分类，递归继续
                                recursionCategory(data[i].children);
                            }
                            itemAry.pop();//出栈
                        }
                    }
                    recursionCategory(this.categoryData);//调用递归
                    this.bindCategoryIds = echoTreeArr;
                    console.log(bindCategoryIds, '处理后将要回显的数组')
                }

            },
        },
        mounted(){
          this.editFlagNum = 2 //假设是编辑状态
        },
        methods:{
            //选中后处理bindCategoryIds,为了与后端接口对接
            changeClick(newVal){
                let ids = [];
                newVal.forEach((item) => {
                    ids.push(item[item.length - 1]);
                })
                this.interfaceCateId = ids.join(',');
                console.log(this.interfaceCateId, '处理后将要传给后端的interfaceCateId')
            }
        }
    }
</script>

<style scoped>

</style>

不知道有没有对element-ui了解至深的小伙伴还有其他什么方法，如果有请分享一下，共同学习！！共同进步！！