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

幸运小男神2024-07-07 12:41

前言

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

问题再现

联动下拉框的数据如下：

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

解决方案

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

javascript 复制代码

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