【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)团队基于亚马逊云科技云上科…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中,明确沟通敏捷转型目的尤为关键,团队成员只有清晰理解转型背后的原因和利益,才能降低对变化的…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
java高级——高阶函数、如何定义一个函数式接口类似stream流的filter
java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用(Math::max) 2 函数接口…...
react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架
1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...
