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

今天一个设计是在树形列表中编辑表单,其中有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>
相关推荐
临江仙4558 分钟前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
数字化顾问16 分钟前
基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现
vue.js·spring boot·后端
Neil鹏40 分钟前
解决 Vite 代理中的 E RR_CONTENT_DECODING_FAILED 错误:禁用自动压缩的实践
vue.js
华仔啊1 小时前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
ttod_qzstudio1 小时前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript
通往曙光的路上1 小时前
day9_elementPlus2
javascript·vue.js·elementui
一只小风华~1 小时前
Vue Router 的三种历史模式详解
前端·javascript·vue.js·笔记·学习·前端框架·ecmascript
前端_Coder1 小时前
Vue 3 watch 与 watchEffect ,哪个更好?
前端·vue.js·前端框架
一只小风华~1 小时前
Vue Router 导航守卫
java·前端·javascript·vue.js·笔记·html
龙仔CLL3 小时前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf