【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)团队基于亚马逊云科技云上科…...
从“单点防御”到“全局联动”:手把手教你用EDR和NDR构建企业安全闭环
从“单点防御”到“全局联动”:手把手教你用EDR和NDR构建企业安全闭环 当企业的安全团队还在疲于应对零散的端点告警和网络流量异常时,攻击者早已开始采用自动化工具进行横向移动。传统孤立的防御手段就像用多个单点摄像头监控银行金库——每个摄像头都…...
如何用Win11Debloat让你的Windows系统速度提升70%:终极优化指南
如何用Win11Debloat让你的Windows系统速度提升70%:终极优化指南 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutt…...
TPAMI 2026 | 雨雾噪模糊全搞定!CPL 框架让图像复原告别单一任务限制
点击上方“小白学视觉”,选择加"星标"或“置顶” 重磅干货,第一时间送达在日常拍摄中,一张照片可能同时遭遇噪声、雾霾、雨滴等多种退化问题,而传统图像复原方法要么只能处理单一退化类型,要么在多任务场景下…...
Arctic数据压缩与序列化:LZ4压缩如何提升性能10倍的终极指南
Arctic数据压缩与序列化:LZ4压缩如何提升性能10倍的终极指南 【免费下载链接】arctic High performance datastore for time series and tick data 项目地址: https://gitcode.com/gh_mirrors/ar/arctic Arctic是一个专为时间序列和tick数据设计的高性能数据…...
Android 11文件权限避坑指南:为什么你的APP无法修改原文件?
Android 11存储权限深度解析:从沙盒机制到实战解决方案 在去年的一次应用升级中,我们团队遇到了一个棘手的问题:用户反馈图片编辑后无法保存到原位置。经过排查,发现这是Android 11引入的存储权限机制变化导致的。作为开发者&…...
DAMOYOLO-S快速上手:移动端浏览器访问Web服务与触屏操作适配说明
DAMOYOLO-S快速上手:移动端浏览器访问Web服务与触屏操作适配说明 1. 开篇:一个能“看懂”世界的AI助手 想象一下,你正用手机拍一张街景照片,屏幕上立刻就能标出“汽车”、“行人”、“交通灯”,甚至“手提包”。这不…...
多任务学习进阶:从MMoE到PLE的模型演进与实战解析
1. 多任务学习基础与核心挑战 多任务学习(Multi-Task Learning, MTL)是机器学习领域的一个重要分支,它让单个模型同时学习多个相关任务。想象一下,你正在教一个学生同时学习数学和物理。如果这两个学科有共同的基础概念࿰…...
【Coze】从零开始:AI Agent开发平台的入门指南
1. Coze平台初体验:零基础也能玩转AI开发 第一次接触Coze时,我完全被它的易用性震惊了。作为一个没有任何编程背景的市场专员,我居然在半小时内就做出了能自动回复客户咨询的AI助手。这个由字节跳动开发的AI Agent开发平台,真正实…...
Phi-4-mini-reasoning企业应用探索:智能客服知识推理模块集成方案
Phi-4-mini-reasoning企业应用探索:智能客服知识推理模块集成方案 1. 轻量级推理模型的价值 在当今企业智能化转型浪潮中,轻量级推理模型正成为技术落地的关键。Phi-4-mini-reasoning作为一款专注于高质量推理的开源模型,凭借其128K令牌的超…...
6大维度深度测评:如何挑选最可靠的开源付费墙绕过工具?
6大维度深度测评:如何挑选最可靠的开源付费墙绕过工具? 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字阅读时代,优质内容的付费壁垒逐渐形成…...
