关于 element-ui el-cascader 数据回显问题的解决方案

前言

        这两天在使用 el-cascader 控件时，后端日期的数据如“2023-05-06”前端需要按照“年-月-日”的形式分割成三级联动，因为数据库保存的是完整的日期，前端数据回显时需要对后端返回的数据进行处理。

问题再现

        联动下拉框的数据如下：

{date: [{label: '2023',value: '2023',children: [{label: '05',value: '05',children: [{label: '06',value: '06'},{label: '07',value: '07'},{label: '08',value: '08'}]     }]}]
}

当我调完后端接口将日期拆解为如下格式时，下拉框并没有勾选上（图片盗的。。。）：

let date = [{label: '2023',value: '2023',children: [{label: '05',value: '05',children: [{label: '06',value: '06'}]     }]}];

 

然后给 el-cascader 绑定一个 @change 事件，勾选下拉框后打印日志是这样的：

// 单选（multiple=false） 时， val = ["zhinan","shejiyuanze","yizhi"]
// 多选（multiple=true） 时， val = [["zhinan","shejiyuanze","yizhi"]]

由此可以得出结论：el-cascader 需要的参数是整条路径，[第一级，第二级，第三级，***]

解决方案

将回显数据改造成如下结构即可正常解析：

let date = [['2023','05','06']]