关于 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沙箱…

匿名函数return lambda t

在代码片段中,return lambda t: t * theta 的含义是返回一个匿名函数(也叫 lambda 函数)。这个匿名函数接收一个参数 t,并返回 t * theta 的值。下面是一个详细的解释: 解释 定义函数 f: def f(theta):ret…

分子AI预测赛Task1笔记

分子AI预测赛Task1笔记 实践步骤:跑通baseline → 尝试个人idea→尝试进阶baseline 一、跑通baseline 1、应当先下载数据库 下载相应的数据库 !pip install lightgbm openpyxl2、训练模型并预测结果 首先要导入相应的库和方法类,如pandas等 # 1. …

【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 文件,在文件…

《每天5分钟用Flask搭建一个管理系统》第2章:项目结构与配置

第2章:项目结构与配置 2.1 Flask项目目录结构 一个典型的Flask项目可能包含以下目录和文件: /app - 应用目录 __init__.py - 初始化Flask应用models.py - 数据模型定义views.py - 视图函数定义forms.py - 表单类定义 /config - 配置文件目录 config.p…

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

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

下标引用操作符;函数调用操作符;结构成员访问操作符

[] --- 下标引用操作符 下标引用操作符的操作数&#xff1a; 一个数组名 一个索引值 代码演示&#xff1a; #include<stdio.h> int main() {//创建数组int arr[5] { 1,2,3,4,5 }; // 数组下标&#xff1a; 0 1 2 3 4 //找到数组中3的元素并打印prin…

C# new关键字的三种用法

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

从docker容器中导出单个表或整个数据库

首先你的服务器中已经有mysql容器进入到mysql容器中来 docker exec -it mysql /bin/bash 执行mysqldump命令导出数据 mysqldump -u root -p civil tb_user > product_info.sql# civil是数据库 # tb_user 是表名 # product_info.sql 是要保存数据的sql文件 上面这条命令会把…

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

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

从0开始学习pyspark--Spark DataFrame数据的选取与访问[第5节]

在PySpark中&#xff0c;选择和访问数据是处理Spark DataFrame的基本操作。以下是一些常用的方法来选择和访问DataFrame中的数据。 选择列&#xff08;Selecting Columns&#xff09;: select: 用于选择DataFrame中的特定列。selectExpr: 用于通过SQL表达式选择列。 df.select…

DSSAT作物模建模实践方法

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

BMA580 运动传感器

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

多自由度平台资料网站连接

PLC控制的4点调平系统 - 豆丁网 (docin.com) 三自由度运动平台系统建模与分析 - 豆丁网 (docin.com) 四足机器人&#xff08;三&#xff09;--- 姿态控制_四足机器人姿态控制-CSDN博客