当前位置: 首页 > news >正文

【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 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…...

一、Linux下常用的压缩格式

一、Linux下常用的压缩格式 ​ Linux下常用的压缩扩展名有&#xff1a;.tar、.tar.bz2、.tar.gz。 二、Windows下7ZIP软件的安装 ​ 因为Linux下很多文件是.bz2&#xff0c;.gz结尾的压缩文件&#xff0c;因此需要在windows下安装7ZIP软件。 三、gzip压缩工具 .gzip工具负…...

MySQL 查询 - 排除某些字段的SQL查询,提升查询性能

序言 某些时候&#xff0c;需要查询拥有很多很多字段的表&#xff0c;但是查询表时&#xff0c;其中有一些不需要查询的字段&#xff0c;会增加查询的负担&#xff0c;所以这时候&#xff0c;就需要排除这些冗余的字段&#xff0c;指定需要的字段查询&#xff0c;提升查询性能…...

国产信创服务器如何进行安全可靠的文件传输?

信创&#xff0c;即信息技术应用创新&#xff0c;2018年以来&#xff0c;受“华为、中兴事件”影响&#xff0c;国家将信创产业纳入国家战略&#xff0c;并提出了“28n”发展体系。从产业链角度&#xff0c;信创产业生态体系较为庞大&#xff0c;主要包括基础硬件、基础软件、应…...

ARTS第五周:S - 数据编织 Data fabric

Brife ​数据编织/数据经纬&#xff08;Data Fabric&#xff09;是一种新型的数据管理和治理方法&#xff0c;旨在连接和整合所有数据源和数据目标&#xff0c;实现数据的无缝移动和访问。它是一种跨平台、跨云、跨技术的解决方案&#xff0c;可以连接各种类型的数据&#xff0…...

基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程

详情点击链接&#xff1a;基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程 一&#xff0c;空间数据获取与制图 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图片&#xff1f;在工作中&#xff0c;如果我们收到无法修改编辑的PDF文件&#xff0c;可能会遇到一些困难。尤其是当平台或网站只支持JPG图片格式&#xff0c;而领导又要求我们将pdf文件改为JPG格式时&#xff0c;情况就更为棘手了。这对于我们打工一族来说…...

计算机脚本的概念,如何编写、使用脚本 (Script)?

一、脚本的概念和使用场景 在计算机领域的脚本&#xff0c;指的是使用一种特定的描述性语言&#xff0c;依据一定的格式编写的可执行文件脚本语言又被称为扩建的语言或者动态语言, 是一种编程语言, 用来控制软件应用程序, 脚本通常是以文本 (ASCⅡ) 保存, 只是在被调用时进行解…...

c语言 5.0

&#x1f482; 个人主页: 程序员爱摸鱼&#x1f91f; 版权: 本文由【程序员爱摸鱼】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注点赞收藏(一键三连)哦&#x1f485; 想寻找共同成长的小伙伴&#xff0c;可以互粉哦 &#x1f4ac;文章目录…...

如何配置远程访问以在外部网络中使用公司内部的OA办公系统——“cpolar内网穿透”

文章目录 前言1. 确认在内网下能够使用IP端口号登录OA办公系统2. 安装cpolar内网穿透3. 创建隧道映射内网OA系统服务端口4. 实现外网访问公司内网OA系统总结 前言 现在大部分公司都会在公司内网搭建使用自己的办公管理系统&#xff0c;如OA、ERP、金蝶等&#xff0c;员工只需要…...

【AI】机器学习——线性模型(线性回归)

线性模型既能体现出重要的基本思想&#xff0c;又能构造出功能更加强大的非线性模型 文章目录 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. 红外壁障模块分析 原理和循迹是一样的&#xff0c;循迹红外观朝下&#xff0c;跟随朝前 TCRT5000传感器的红外发射二极管不断发射红外…...

行业追踪,2023-09-07

自动复盘 2023-09-07 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

Qt creator中项目的构建配置和运行设置

使用 Qt Creator 集成开发环境构建和运行程序是一件非常简单的事情&#xff0c;一个按钮或者一个快捷键搞定全部&#xff0c;大家已经都了解了。但是&#xff0c;这些看起来简单的过程&#xff0c;背后到底发生了什么呢&#xff1f; 点击 Qt Creator 项目模式&#xff0c;可以…...

蓝桥杯打卡Day3

文章目录 吃糖果递推数列 一、吃糖果IO链接 本题思路:本题题意就是斐波那契数列&#xff01; #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遵循一切皆是文件的理念&#xff0c;因此&#xff0c;很多的交互工作都是通过读取和写入文件来完成。 文件必须被打开才能被…...

亚马逊云科技通过生成式AI,帮助清华RIOS加速计算和分析的处理效率

近日&#xff0c;硬件创建平台Efabless宣布了其第一届“生成式AI开源芯片设计挑战赛”&#xff08;AI Generated Open-Source Silicon Design Challenge&#xff09;的评选结果。来自清华大学的RISC-V国际开源实验室&#xff08;RIOS Lab&#xff09;团队基于亚马逊云科技云上科…...

2026年中国企业AI应用场景报告

当多模态技术突破模态壁垒&#xff0c;当超级智能体成为业务重构的核心执行者&#xff0c;AI 正从实验室走向产业深水区&#xff0c;成为企业降本增效、创新增长的关键引擎。但与此同时&#xff0c;“AI 应用停留在工具层面”“落地效果不及预期”“行业场景适配难” 等痛点&am…...

MMC模块化多电平换流器Simulink仿真模型:N=10子模块的载波移相调制与多控制策略应用

MMC模块化多电平换流器&#xff0c;MMC-HVDC直流输电系统&#xff0c;单个桥臂N10个子模块&#xff0c;采用载波移相调制 simulink仿真模型。 为了测试控制性能良好&#xff0c;在1s时&#xff0c;额定有功功率10e6增加到15e6。 子模块电压2000V&#xff0c;直流电压20KV。 定有…...

5分钟搞定电脑风扇噪音!FanControl超详细配置指南让你告别“飞机起飞“

5分钟搞定电脑风扇噪音&#xff01;FanControl超详细配置指南让你告别"飞机起飞" 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcod…...

通过 Langchain 框架实现 ChatGPT 的使用

一. 简介Langchain 框架&#xff1a;LangChain 是一个开源框架&#xff0c;是一个让大语言模型&#xff08;如ChatGPT&#xff09;能连接外部工具、记忆对话、执行复杂任务的“智能助手”开发框架&#xff0c;解决了LLM应用开发中的各种工程化问题。# LangChain 的核心定位&…...

5步掌握跨平台资源下载神器:从音乐到短视频的完整解决方案

5步掌握跨平台资源下载神器&#xff1a;从音乐到短视频的完整解决方案 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否…...

硬件基础常识【2】--BJT深度饱和区的参数设计与工程实践

1. BJT深度饱和区的核心参数设计 三极管作为电子设计中最基础的元器件之一&#xff0c;其开关特性在实际工程中应用极为广泛。要让BJT稳定工作在深度饱和区&#xff0c;关键是要掌握几个核心参数的相互关系。我当年在设计第一个开关电路时&#xff0c;就因为没吃透这些参数关系…...

PrimeTime:默认配置文件

相关阅读 PrimeTimehttps://blog.csdn.net/weixin_45791458/category_12900271.html?spm1001.2014.3001.5482 当启动PrimeTime时&#xff0c;它会自动执行三个设置文件中的命令&#xff0c;这些文件具有相同的文件名.synopsys_pt.setup&#xff0c;但位于不同的目录中&#x…...

SDXL-Turbo实战教程:从A futuristic car到motorcycle的删改逻辑教学

SDXL-Turbo实战教程&#xff1a;从A futuristic car到motorcycle的删改逻辑教学 获取更多AI镜像 想探索更多AI镜像和应用场景&#xff1f;访问 CSDN星图镜像广场&#xff0c;提供丰富的预置镜像&#xff0c;覆盖大模型推理、图像生成、视频生成、模型微调等多个领域&#xff0c…...

5大核心能力解析:YimMenu如何重塑GTA5游戏体验与安全防护

5大核心能力解析&#xff1a;YimMenu如何重塑GTA5游戏体验与安全防护 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/Y…...

抖音批量下载神器:告别手动保存,一键收藏创作者全部作品

抖音批量下载神器&#xff1a;告别手动保存&#xff0c;一键收藏创作者全部作品 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser f…...