element UI的Cascader 级联选择器在树形列表中编辑使用

小破孩呦2024-12-07 14:51

今天一个设计是在树形列表中编辑表单，其中有Cascader 级联选择器级联选择器的选择结果一般都是数组，而后端参数只要最后一级的id，假如只传最后一级id，那回显可能就会有问题；

解决办法是：多传一个参数，

参数A：1（后端要的id）；

参数B：[1,2,3,4]，选择后的完整数组(自己使用，用于回显)，
需要注意的是传给后端的时候需要转换成字符串，回来的时候再转换成数组使用

代码如下：

html 复制代码

<el-cascader v-model="row.responsibleDeptPath" :options="deptList" :props="treeOption"></el-cascader>

javascript 复制代码

<script>
    export default {
        data (){
            return {
                deptList: [],
                treeOption: {
                   checkStrictly: true,
                   label: 'title',
                   value: 'id',
                },       
            }
        },
        created(){
            const aa = [
    {
        responsibleDept: 1892533,
        responsibleDeptPath: "[\"1837608\",\"1837616\",\"1892533\"]",
        andonAbnormalTypeVOList: [
            {
                responsibleDept: 1892533,
                responsibleDeptPath: "[\"1837608\",\"1837616\",\"1892533\"]",
                andonAbnormalTypeVOList: [
                    {
                        responsibleDept: 1892533,
                        responsibleDeptPath: "[\"1837608\",\"1837616\",\"1892533\"]",
                    }
                ]
            }
        ]
    }
];

// 遍历树形结构并转换 responsibleDeptPath 为数组
const convertDeptPathToArray = (data) => {
    return data.map(item => {
        // 将 responsibleDeptPath 字符串解析为数组
        item.responsibleDeptPath = JSON.parse(item.responsibleDeptPath);

        // 如果有子项，递归处理
        if (item.andonAbnormalTypeVOList && item.andonAbnormalTypeVOList.length > 0) {
            item.andonAbnormalTypeVOList = convertDeptPathToArray(item.andonAbnormalTypeVOList);
        }

        return item;
    });
};

const result = convertDeptPathToArray(aa);
console.log(result);
        }
    }
</script>