【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单

news2024/11/15 7:05:06

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就是root
            form: {},
            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);//根节点ID
                d.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 / hover
                d.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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/988110.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

欧洲汽车制造商押注电力合成燃料 | 2023中国可持续燃料峰会

欧洲几家汽车制造商表示&#xff0c;所谓的电力合成燃料(e-fuels&#xff0c;利用可再生电力合成的化石燃料&#xff0c;又称电子燃料)将在欧洲汽车行业的未来发挥关键作用&#xff0c;它们相信&#xff0c;布鲁塞尔方面在替代燃料问题上的让步&#xff0c;将使它们能够在未来1…

TiledMap 浅谈

Tiled Map Editer 制作TiledMap的工具很多&#xff0c;这里推荐一个免费的工具。 Tiled Map Editer 官网网站&#xff1a;https://doc.mapeditor.org/ 简单的Tiled Map Editer教程 安装Tiled Map Editer&#xff0c;打开。 点击新建地图 块大小建议为32的倍数 地图方向 …

Commonsense Knowledge Base Completion with Structural and Semantic Context

摘要 与研究较多的传统知识库(如Freebase)相比&#xff0c;常识性知识图(如ATOMIC和ConceptNet)的自动知识库补全提出了独特的挑战。常识知识图使用自由形式的文本来表示节点&#xff0c;与传统知识库相比&#xff0c;导致节点数量增加了几个数量级(与Freebase (FB15K237)相比…

分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测

分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测 目录 分类预测 | MATLAB实现PCA-GRU(主成分门控循环单元)分类预测预测效果基本介绍程序设计参考资料致谢 预测效果 基本介绍 Matlab实现基于PCA-GRU主成分分析-门控循环单元多输入分类预测&#xff08;完整程序和数据…

DataGridView选中的单元格求和

DataGridView单元格求和功能的基本思路是先得到选中的单元格&#xff0c; 1&#xff0c;在内存中定义两张表&#xff0c;一张存放列名&#xff0c;一张存放列名和数个。这样这两张表就开成了一对多的父子关系。 2&#xff0c;在将两张定及他们的父子关系添加到DataSet对象中 4…

5款无广告的小软件,先收藏再下载

​ 最近后台收到好多小伙伴的私信&#xff0c;今天继续推荐五款小工具&#xff0c;都是免费使用的&#xff0c;大家可以去试试看。 1.写作软件——Effie ​ Effie是一款极简风格的写作软件&#xff0c;它可以帮助您优雅地写作和记录&#xff0c;把思想变成价值。Effie支持多种…

嵌入式学习笔记(19)SDRAM引入

SDRAM的特性&#xff08;容量大、价格低、掉电易失性、随机读写、总线式访问&#xff09; SDRAM/DDR都属于动态内存&#xff08;相对于静态内存SRAM&#xff09;&#xff0c;都需要先运行一段初始化代码来初始化才能使用&#xff0c;不像SRAM开机上电后就可以直接运行。类似于…

2023-大数据应用开发-工业可视化参考结果

工业可视化 任务一&#xff1a;用柱状图展示设备历史各个状态持续时长 编写Vue工程代码&#xff0c;根据接口&#xff0c;用柱状图展示接口所有数据中各设备各个状态持续时长&#xff08;秒&#xff09;&#xff0c;同时将用于图表展示的数据结构在浏览器的console中进行打印…

ipad手写笔一定要买苹果的吗?apple pencil二代平替笔推荐

近年来&#xff0c;随着Apple pencil的出现&#xff0c;在工作和学习上给小伙伴们带来了许多便捷。但原装的价格对于我们这些“贫民窟”的小伙伴来说真的是太贵了&#xff0c;而且感觉只是偶尔书写和业余画画&#xff0c;没必要入手这么贵的电容笔。所以咱们国货出现了许多平替…

day53 补

1143.最长公共子序列 力扣题目链接(opens new window) 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长公共子序列的长度。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字符&#xff0…

配置远程访问:让外部网络用户能够使用公司内部的OA办公系统

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

VSCode中调试通过torchrun实现的分布式训练启动程序

train.sh文件实现torchrun如下 #!/bin/bashpy3clean ./ CUDA_VISIBLE_DEVICES3 torchrun --nproc_per_node1 --master_port9006 tools/train.py \configs/basicvsr_plusplus_vimeo90k_bd.py \--seed 0 \ 需要进行更改来DeBug&#xff0c;改成launch.json如下所示&#xff0c;…

问道管理:沪指跌0.43%坚守3100点,地产、石油等板块走弱

8日早盘&#xff0c;沪指再度回调&#xff0c;检测3100点支撑&#xff1b;深成指、创业板指均下挫&#xff1b;两市半日成交约4000亿元。 到午间收盘&#xff0c;沪指跌0.43%报3108.84点&#xff0c;深成指跌0.69%&#xff0c;创业板指跌0.72%&#xff0c;科创50指数微涨0.01%…

蓝桥杯打卡Day5

文章目录 日志排序重复者 一、日志排序IO链接 本题思路:本题就是根据就是排序的知识点&#xff0c;在sort内部可以使用仿函数来改变此时排序规则。 #include <bits/stdc.h>const int N10010; int n; std::string logs[N];int main() {std::ios::sync_with_stdio(false)…

Linux下的系统编程——共享存储映射(十)

前言&#xff1a; mmap是一种内存映射文件的方法&#xff0c;即将一个文件或者其它对象映射到进程的地址空间&#xff0c;实现文件磁盘地址和进程虚拟地址空间中一段虚拟地址的一一对映关系。实现这样的映射关系后&#xff0c;进程就可以采用指针的方式读写操作这一段内存&…

数据结构与算法:概述

目录 算法 评价标准 时间的复杂度 概念 推导原则 举例 空间的复杂度 定义 情形 运用场景 数据结构 组成方式 算法 在数学领域&#xff0c;算法是解决某一类问题的公式和思想&#xff1b; 计算机科学领域&#xff0c;是指一系列程序指令&#xff0c;用于解决特定的…

30 秒使用 Sealos 搭建个人密码管理器 Vaultwarden

我与 LastPass 的曲折恋情 超过 8 年网龄的我&#xff0c;注册过很多网站帐号&#xff0c;每个网站的密码我都用不同的复杂密码。一开始我全靠脑力记忆这些密码&#xff0c;后来渐渐觉得记起来很困难&#xff0c;就记录在笔记本上。但是随着时间推移&#xff0c;我发现这种方法…

什么样的蓝牙耳机戴着舒服,佩戴舒适的蓝牙耳机推荐

什么样的蓝牙耳机戴着舒服&#xff1f;相信大家肯定有这么一个困扰&#xff0c;就是在入耳式耳机佩戴时间久了&#xff0c;总感觉耳道内部不舒服&#xff0c;那么今天我要向大家介绍一种备受骨传导爱好者推崇的神奇装置——骨传导耳机。首先&#xff0c;让我们来了解一下骨传导…

亚信安慧荣膺“信创工委会技术活动单位”

近日&#xff0c;以亚信科技AntDB数据库团队为基础组建而成的湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧&#xff09;被中国电子工业标准化技术协会、信息技术应用创新工作委员会(简称&#xff1a;信创工委会)授予“信息技术应用创新工作委员会技术活动单位…

小程序分销机制介绍,小程序二级分销功能有哪些?

为什么有越来越多的用户选择使用小程序&#xff1f;跟“高大上”的APP相比&#xff0c;小程序不仅可以减少下载安装的复杂流程&#xff0c;还具备操作便捷、沉淀私域数据的优势。蚓链分销小程序具备裂变二维码、实时分佣、分销身份升级、层级分佣、商品个性化佣金设定等功能&am…