关于 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']]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/39316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【操作系统】进程管理——线程管理(个人笔记)

学习日期:2024.7.2 内容摘要:线程的概念、存在的意义、线程的属性,线程的实现方式,线程的状态与组织。 线程的概念 拿QQ来说,QQ既可以打视频电话,也可以在这同时进行文字聊天或传送文件,进程是…

零信任沙箱在数据安全领域的意义

在当今日益复杂的网络安全环境中,零信任沙箱作为一种前沿的安全防护技术,受到了广泛关注。而SDC沙箱作为零信任沙箱领域的佼佼者,凭借其独特的技术优势和卓越的价值,为企业和组织提供了强大的数据安全保障。本文将深入探讨SDC沙箱…

【postgresql】数据库操作

创建数据库 使用 CREATE DATABASE SQL 语句来创建 语法: CREATE DATABASE dbname; 使用 createdb 命令来创建 语法: createdb [option...] [dbname [description]] 参数说明: dbname:要创建的数据库名。 description&…

成人职场商务英语学习柯桥外语学校|邮件中的“备注”用英语怎么说?

在英语中,"备注"通常可以翻译为"Notes" 或 "Remarks"。 这两个词在邮件中都很常用。例如: 1. Notes Notes: 是最通用和最常见的表达,可以用在各种情况下,例如: 提供有关电子邮件内容的附加信息 列…

每日一题——Python实现PAT乙级1100 校庆(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页:用哲学编程-CSDN博客专栏:每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 代码结构和逻辑 时间复杂度分析 空间复杂度分析 总结 我要更强 方法一…

什么美业门店管理系统好用?2024美业收银系统软件排名分享

美业SAAS系统在美容、美发、美甲等行业中十分重要,这种系统为美业提供了一种数字化解决方案,帮助企业更高效地管理业务和客户关系。 美业门店管理系统通常提供预约管理、客户管理、库存管理、报表生成等一系列功能,以满足美容院、美发沙龙等…

【AIGC评测体系】大模型评测指标集

大模型评测指标集 (☆)SuperCLUE(1)SuperCLUE-V(中文原生多模态理解测评基准)(2)SuperCLUE-Auto(汽车大模型测评基准)(3)AIGVBench-T2…

Linux 实现自定义系统调用,支持参数和结果返回

本文实现一个简单的系统调用实现,支持输入字符串参数,并返回一个结果字符串。 以下是验证步骤: 1. 添加系统调用编号 试验使用的是 x86_64 架构的 Linux 内核。 找到并编辑 arch/x86/entry/syscalls/syscall_64.tbl 文件,在文件…

机械行业常见问题及ERP解决办法

机械行业在全球经济一体化和技术进步背景下,面临着越来越多的挑战。为了在激烈的市场竞争中立于不败之地,企业需要找到合适的方法优化生产流程、降低成本、提升客户满意度。因此,有效地利用企业资源规划(ERP)解决方案变…

C# new关键字的三种用法

在C#中,new关键字具有多种不同的用途,主要包括以下三个: 1.作为运算符: 创建对象和调用构造函数:这是最常见的用法,用于在堆上分配内存并初始化一个类的新实例。例如: Person person new Pe…

65.WEB渗透测试-信息收集- WAF、框架组件识别(5)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:64.WEB渗透测试-信息收集- WAF、框架组件识别(4)-CSDN博客 waf绕…

DSSAT作物模建模实践方法

随着数字农业和智慧农业的发展,基于过程的作物生长模型(Process-based Crop Growth Simulation Model)在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农业碳中和、农田固碳减排等领域扮演着越来越重要的作用。Decisi…

BMA580 运动传感器

型号简介 BMA580是博世(bosch-sensortec)的一款先进的、超小型加速度传感器。具有独特的骨传导语音活动检测功能和先进的功率模式功能,是世界上最小的加速度传感器(1.2 x 0.8 x 0.55 mm)。它专为紧凑型设备&#xff08…

2024年建筑八大员(质量员-土建专业)考试题库。全面提升考试成绩,轻松过级!

1.砖基础施工时,砖基础的转角处和交接处应同时砌筑,当不能同时砌筑时,应留置()。 A.直槎 B.凸槎 C.凹槎 D.斜槎 答案:D 2.分项工程施工前技术准备工作,主要指把拟定的分项工程施工前所需要…

Python的库dataperp读取excel和csv

领导说这个很牛,不过咱们不能听别人一口之言,咱们应该亲手试试,在来说这个好或者不好。 这个dataprepe已经不维护了,最高只支持python3.11以下版本,建议选择3.9. 他只能处理dataframe格式的数据,也就是pandas加载后的数…

Python模拟火焰文字效果:炫酷的火焰字动效

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame定义火焰效果类主循环 完整代码 引言 火焰文字效果是一种炫酷的视觉效果,常用于广告、游戏和艺术设计中。在这篇博客中,我们将使用Python创建一个火焰文字的动画效果。通过利用Py…

前端开发中的常见问题及解决方法

前端开发是一个充满挑战和乐趣的领域。然而,在开发过程中,开发者常常会遇到各种各样的问题。本文将介绍一些前端开发中常用或者经常遇到的问题,并提供相应的解决方法,帮助你提高开发效率和解决问题的能力。 一. 页面布局问题 问题…

【启明智显技术分享】SSD202D核心板方案双网口SBC2D06开发板开箱与实操全攻略上手指南

一、背景 本指南将详细介绍启明智显基于SSD202D核心板方案下的双网口-SBC2D06的开箱及实操上手应用。无论您是电子爱好者、开发者还是工程师,这份指南都能助您快速上手并充分利用这款双网口开发板的各项功能。 二、硬件介绍 SBC2D06双网口开发板,作为…

Flink实现准确和高效流处理的关键问题

时间相关: Watermark 水位线 水位线是插入到数据流中的一个标记,可以认为是一个特殊的数据。水位线主要的内容是一个时间戳,用来表示当前事件时间的进展。水位线是基于数据的时间戳生成的。水位线的时间戳必须单调递增,以确保任务的事件时间时钟一直向前推进,进展。水位线…

香橙派OrangePi AIpro初体验:当小白拿到一块开发板第一时间会做什么?

文章目录 香橙派OrangePi AIpro初体验:当小白拿到一块高性能AI开发板第一时间会做什么前言一、香橙派OrangePi AIpro概述1.简介2.引脚图开箱图片 二、使用体验1.基础操作2.软件工具分析 三、香橙派OrangePi AIpro.测试Demo1.测试Demo1:录音和播音(USB接口…