【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
sgLazyCascader源码
<template><div :class="$options.name"><el-cascader :props="props" v-model="model" :placeholder="placeholder || '请选择'" :options="options"></el-cascader></div>
</template>
<script>
export default {name: 'sgLazyCascader',data() {return {model: null,mainKey: 'id',//默认主键defaultRootId: 'root',//默认根节点ID就是rootform: {},props: {lazy: true,expandTrigger: 'hover',multiple: false,lazyLoad: (node, resolve) => {this.loadNodeData(node.level === 0 ? { [this.mainKey]: this.defaultRootId } : node.data, d => resolve(d));}}}},props: ["value","options",//回显的时候使用"data","placeholder",],watch: {value: { handler(d) { this.model = d; }, deep: true, immediate: true, },model(d) { this.$emit('input', d); },data: {handler(d) {d.nodeKey && (this.mainKey = d.nodeKey);//主键d.rootId && (this.defaultRootId = d.rootId);//根节点IDd.value && (this.props.value = d.value);//指定选项的值为选项对象的某个属性值d.label && (this.props.label = d.label);//指定选项标签为选项对象的某个属性值d.children && (this.props.children = d.children);//指定选项的子选项为选项对象的某个属性值 d.expandTrigger && (this.props.expandTrigger = d.expandTrigger);//次级菜单的展开方式click / hoverd.hasOwnProperty('multiple') && (this.props.multiple = d.multiple);//是否多选 d.hasOwnProperty('lazy') && (this.props.lazy = d.lazy);//是否动态加载子节点,需与 lazyLoad 方法结合使用 }, deep: true, immediate: true,},},methods: {// 加载节点数据(通过接口向后台获取数据)loadNodeData(data, cb) {let resolve = d => { cb && cb(d) };this.$emit(`loadNode`, data, resolve);},},
};
</script>
用例
<template><div :class="$options.name"><sgLazyCascader v-model="value" :data="{nodeKey: `ID`,//主键value: `ID`,label: 'MC',}" :options="options" placeholder="请选择" @loadNode="loadNode" /></div>
</template><script>
import sgLazyCascader from "@/vue/components/admin/sgLazyCascader";
export default {components: {sgLazyCascader,},data() {return {value: [],options: [],}},methods: {// 加载节点数据loadNode(data, resolve) { this.$d.apiname({ data: { PID: data.ID }, doing: { s: d => resolve(d) } }); },}
};
</script>
相关文章:
【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
sgLazyCascader源码 <template><div :class"$options.name"><el-cascader :props"props" v-model"model" :placeholder"placeholder || 请选择" :options"options"></el-cascader></div> &l…...
2023高教社杯数学建模E题思路模型 - 黄河水沙监测数据分析
# 1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响, 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…...
一、Linux下常用的压缩格式
一、Linux下常用的压缩格式 Linux下常用的压缩扩展名有:.tar、.tar.bz2、.tar.gz。 二、Windows下7ZIP软件的安装 因为Linux下很多文件是.bz2,.gz结尾的压缩文件,因此需要在windows下安装7ZIP软件。 三、gzip压缩工具 .gzip工具负…...
MySQL 查询 - 排除某些字段的SQL查询,提升查询性能
序言 某些时候,需要查询拥有很多很多字段的表,但是查询表时,其中有一些不需要查询的字段,会增加查询的负担,所以这时候,就需要排除这些冗余的字段,指定需要的字段查询,提升查询性能…...
国产信创服务器如何进行安全可靠的文件传输?
信创,即信息技术应用创新,2018年以来,受“华为、中兴事件”影响,国家将信创产业纳入国家战略,并提出了“28n”发展体系。从产业链角度,信创产业生态体系较为庞大,主要包括基础硬件、基础软件、应…...
ARTS第五周:S - 数据编织 Data fabric
Brife 数据编织/数据经纬(Data Fabric)是一种新型的数据管理和治理方法,旨在连接和整合所有数据源和数据目标,实现数据的无缝移动和访问。它是一种跨平台、跨云、跨技术的解决方案,可以连接各种类型的数据࿰…...
基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程
详情点击链接:基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程 一,空间数据获取与制图 1.1 软件安装与应用 1.2 空间数据 1.3海量空间数据下载 1.4 ArcGIS软件…...
Spring Boot 介绍
Spring Framework的发展和Spring Boot Spring 3 支持Java注解Spring 4 支持 Java 8, 同时推出Spring Boot Spring Boot 简化了Spring配置。Spring Boot是什么? Boot 翻译有靴子,启动的意思, 在计算机领域有引导的意思, 比如计算机启动引导或是Linux 的引导程序。 Spring B…...
mysql基于AES_ENCRYPTAES_DECRYPT实现密码的加密与解密
1.直接使用AES_ENCRYPT&&AES_DECRYPT函数导致的问题。 执行语句 select AES_ENCRYPT(cd123,key) 结果 加密过后的字符串是一串很奇怪的字符。 尝试使用上面加密过后的字符解密。 select AES_DECRYPT(u5£d|#,key) 结果 并未成功的解密 2.解决办法 使用 hex(…...
怎么把pdf转换成jpg图片?
怎么把pdf转换成jpg图片?在工作中,如果我们收到无法修改编辑的PDF文件,可能会遇到一些困难。尤其是当平台或网站只支持JPG图片格式,而领导又要求我们将pdf文件改为JPG格式时,情况就更为棘手了。这对于我们打工一族来说…...
计算机脚本的概念,如何编写、使用脚本 (Script)?
一、脚本的概念和使用场景 在计算机领域的脚本,指的是使用一种特定的描述性语言,依据一定的格式编写的可执行文件脚本语言又被称为扩建的语言或者动态语言, 是一种编程语言, 用来控制软件应用程序, 脚本通常是以文本 (ASCⅡ) 保存, 只是在被调用时进行解…...
c语言 5.0
💂 个人主页: 程序员爱摸鱼🤟 版权: 本文由【程序员爱摸鱼】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注点赞收藏(一键三连)哦💅 想寻找共同成长的小伙伴,可以互粉哦 💬文章目录…...
如何配置远程访问以在外部网络中使用公司内部的OA办公系统——“cpolar内网穿透”
文章目录 前言1. 确认在内网下能够使用IP端口号登录OA办公系统2. 安装cpolar内网穿透3. 创建隧道映射内网OA系统服务端口4. 实现外网访问公司内网OA系统总结 前言 现在大部分公司都会在公司内网搭建使用自己的办公管理系统,如OA、ERP、金蝶等,员工只需要…...
【AI】机器学习——线性模型(线性回归)
线性模型既能体现出重要的基本思想,又能构造出功能更加强大的非线性模型 文章目录 3.1 线性模型3.1.1 数据3.1.2 目标/应用 3.2 线性回归3.2.1 回归模型历史3.2.2 回归分析研究内容回归分析步骤 3.2.3 回归分析分类3.2.4 回归模型3.2.5 损失函数梯度下降法一元回归模…...
智能小车之跟随小车、避障小车原理和代码
目录 1. 红外壁障模块分析编辑 2. 跟随小车的原理 3. 跟随小车开发和调试代码 4. 超声波模块介绍 5. 摇头测距小车开发和调试代码 1. 红外壁障模块分析 原理和循迹是一样的,循迹红外观朝下,跟随朝前 TCRT5000传感器的红外发射二极管不断发射红外…...
行业追踪,2023-09-07
自动复盘 2023-09-07 凡所有相,皆是虚妄。若见诸相非相,即见如来。 k 线图是最好的老师,每天持续发布板块的rps排名,追踪板块,板块来开仓,板块去清仓,丢弃自以为是的想法,板块去留让…...
Qt creator中项目的构建配置和运行设置
使用 Qt Creator 集成开发环境构建和运行程序是一件非常简单的事情,一个按钮或者一个快捷键搞定全部,大家已经都了解了。但是,这些看起来简单的过程,背后到底发生了什么呢? 点击 Qt Creator 项目模式,可以…...
蓝桥杯打卡Day3
文章目录 吃糖果递推数列 一、吃糖果IO链接 本题思路:本题题意就是斐波那契数列! #include <bits/stdc.h>typedef uint64_t i64;i64 f(i64 n) {if(n1) return 1;if(n2) return 2;return f(n-1)f(n-2); }signed main() {std::ios::sync_with_stdio(false);s…...
Linux系统编程--IO
文章目录 一、系统调用1.open()1.1 所需基础知识1.2. open() 详解1.3 示例代码 二、标准IO三、高级IO 一、系统调用 1.open() 1.1 所需基础知识 Linux遵循一切皆是文件的理念,因此,很多的交互工作都是通过读取和写入文件来完成。 文件必须被打开才能被…...
亚马逊云科技通过生成式AI,帮助清华RIOS加速计算和分析的处理效率
近日,硬件创建平台Efabless宣布了其第一届“生成式AI开源芯片设计挑战赛”(AI Generated Open-Source Silicon Design Challenge)的评选结果。来自清华大学的RISC-V国际开源实验室(RIOS Lab)团队基于亚马逊云科技云上科…...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
Git常用命令完全指南:从入门到精通
Git常用命令完全指南:从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...
Oracle11g安装包
Oracle 11g安装包 适用于windows系统,64位 下载路径 oracle 11g 安装包...
