Vue3 + Element Plus + TypeScript 中 el-cascader 实现模拟用户点击功能

news2025/6/6 5:55:59

模拟点击,调用 el-cascader 的公开方法 togglePopperVisible 来展开下拉框

MaterialOut.vue

<script setup lang="ts" name="MaterialOut">
......
import { ElMessage, type ElCascader } from "element-plus";

// 级联组件实例
const cascaderRef = ref<InstanceType<typeof ElCascader> | null>(null);

// 记账
const onJzClick = async () => {
  if (!ckMaster.value.llPersonId) {
    ElMessage.error("请选择领取人员!");
    // 模拟点击,调用 el-cascader 的公开方法来展开下拉框
    cascaderRef.value?.togglePopperVisible(true);
    return;
  }
};
......
</script>

<template>
......
              <el-cascader
                v-else
                ref="cascaderRef"
                v-model="llDeptPersonValue"
                :options="departmentUserTreeData"
                :show-all-levels="false"
                clearable
                @change="handleLlDeptPersonValueChange" />
......
</template>

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

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

相关文章

【Netty系列】Reactor 模式 2

目录 流程图说明 关键流程 以下是 Reactor 模式流程图&#xff0c;结合 Netty 的主从多线程模型&#xff0c;帮助你直观理解事件驱动和线程分工&#xff1a; 流程图说明 Clients&#xff08;客户端&#xff09; 多个客户端&#xff08;Client 1~N&#xff09;向服务端发起连…

TomatoSCI分析日记:数据分析为什么用csv不用excel

其实并不是多余&#xff0c;虽然看到的内容是一样的&#xff0c;但是相比excel文件&#xff0c;csv文件没这么多繁文缛节&#xff0c;效率更高。 1.csv更干净 csv本质是纯文本&#xff0c;只有你看到的数据&#xff0c;没有花里胡哨的单元格格式、颜色、批注等隐藏信息&#…

HTTP协议完全指南:从请求响应到HTTPS安全机制

文章目录 一、HTTP协议中的基本概念1.HTTP协议介绍&#xff08;1&#xff09;协议&#xff08;2&#xff09;传输&#xff08;3&#xff09;超文本 2.统一资源定位符&#xff08;URL&#xff09; 二、HTTP协议中的请求和响应1.HTTP客户端请求消息&#xff08;1&#xff09;请求…

设计模式——状态设计模式(行为型)

摘要 状态设计模式是一种行为型设计模式&#xff0c;核心在于允许对象在内部状态改变时改变行为。它通过状态对象封装不同行为&#xff0c;使状态切换灵活清晰。该模式包含环境类、抽象状态类和具体状态类等角色&#xff0c;具有避免大量分支判断、符合单一职责和开闭原则等特…

CTFHub-RCE 命令注入-过滤运算符

观察源代码 代码里面可以发现过滤了运算符&#xff0c;我们可以尝试分号&#xff1b; 判断是Windows还是Linux 源代码中有 ping -c 4 说明是Linux 查看有哪些文件 127.0.0.1;ls 打开flag文件 cat这个php文件 127.0.0.1;cat flag_257413168915334.php 可是发现 文本内容显示…

【音视频】H265 NALU分析

1 H265 概述 H264 与 H265 的区别 传输码率&#xff1a;H264 由于算法优化&#xff0c;可以低于 2Mbps 的速度实现标清数字图像传送&#xff1b;H.265 High Profile 可实现低于 1.5Mbps 的传输带宽下&#xff0c;实现 1080p 全高清视频传输。 编码架构&#xff1a;H.265/HEVC…

运维 vm 虚拟机ip设置

虚拟网络设置 nat 模式 网卡 主机设置网卡地址 虚拟机绑定网卡

飞牛fnNAS存储模式RAID 5数据恢复

目录 一、添加硬盘 二、创建RAID 5 存储空间 三、上传测试文件 四、拆除硬盘 五、更换硬盘 六、修复RAID 5 七、验证其内文件 八、NAS系统崩溃后的数据盘 前文《飞牛fnNAS存储空间模式详解》 中介绍了fnNAS存储空间的几个模式,细心的网友应该能感受到,我是非常推崇R…

论文笔记:DreamDiffusion

【初中生也能看得懂的讲解】 想象一下&#xff0c;我们能不能直接用“脑子想”来画画&#xff1f;比如你想到一只猫&#xff0c;电脑就能画出一只猫。这听起来是不是很酷&#xff1f;科学家们一直在努力实现这个“意念画画”的梦想。 以前&#xff0c;科学家们可能会用一种叫…

简单实现Ajax基础应用

Ajax不是一种技术&#xff0c;而是一个编程概念。HTML 和 CSS 可以组合使用来标记和设置信息样式。JavaScript 可以修改网页以动态显示&#xff0c;并允许用户与新信息进行交互。内置的 XMLHttpRequest 对象用于在网页上执行 Ajax&#xff0c;允许网站将内容加载到屏幕上而无需…

数据挖掘顶刊《IEEE Transactions on Knowledge and Data Engineering》2025年5月研究热点都有些什么?

本推文对2025年5月出版的数据挖掘领域国际顶级期刊《IEEE Transactions on Knowledge and Data Engineering》进行了分析&#xff0c;对收录的62篇论文的关键词与研究主题进行了汇总&#xff0c;并对其中的研究热点进行了深入分析&#xff0c;希望能为相关领域的研究人员提供有…

LabVIEW双光子显微镜开发

基于LabVIEW 开发高性能双光子显微镜系统&#xff0c;聚焦于生物样本深层成像与纳米材料三维表征。实现了超快激光控制、多维数据采集与实时图像重建。系统采用飞秒激光光源与高精度振镜扫描模块&#xff0c;结合 LabVIEW 的 FPGA 实时控制能力&#xff0c;可对活体组织、荧光纳…

WordPress 6.5版本带来的新功能

WordPress 6.5正式上线了&#xff01;WordPress团队再一次为我们带来了许多新的改进。在全球开发者的共同努力下&#xff0c;WordPress推出了许多新的功能&#xff0c;本文将对其进行详细总结。 Hostease的虚拟主机现已支持一键安装最新版本的WordPress。对于想要体验WordPres…

实现RabbitMQ多节点集群搭建

目录 引言 一、环境准备 二、利用虚拟机搭建 ​ 三、镜像集群配置 四、HAProxy实现负载均衡(主用虚拟机操作) 五、测试RabbitMQ集群搭建情况 引言 在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;扮演着至关重要的角色,而 RabbitMQ 作为…

GLIDE论文阅读笔记与DDPM(Diffusion model)的原理推导

Abstract 扩散模型&#xff08;Diffusion model&#xff09;最近被证明可以生成高质量的合成图像&#xff0c;尤其是当它们与某种引导技术结合使用时&#xff0c;可以在生成结果的多样性与保真度之间进行权衡。本文探讨了在文本条件图像生成任务中使用扩散模型&#xff0c;并比…

机器学习——放回抽样

为了构建树集成模型&#xff0c;需要一种叫做有放回采样的技术。 以4个标记为演示&#xff0c;分别是红色、黄色、绿色和蓝色&#xff0c;用一个黑色的袋子把这四个标记的例子放进去&#xff0c;然后从这个袋子里有放回地抽取四次&#xff0c;抽出一个标记&#xff0c;结果是绿…

Go的隐式接口机制

正确使用Interface 不要照使用C/Java等OOP语言中接口的方式去使用interface。 Go的Interface的抽象不仅可以用于dynamic-dispatch 在工程上、它最大的作用是&#xff1a;隔离实现和抽象、实现完全的dependency inversion 以及interface segregation(SOLID principle中的I和D)。…

报表/报告组件(二)-实例与实现解释

上篇《报表/报告组件(一)-指标/属性组件设计》介绍了组件核心指标/属性设计&#xff0c;本文以实例介绍各个特性的实现和效果&#xff0c;实例是多个报告融合&#xff0c;显示所有的特性。 设计 指标/属性组件是报告/报表关键部分&#xff0c;上篇已介绍过&#xff0c;本节回顾…

流媒体基础解析:音视频封装格式与传输协议

在视频处理与传输的完整流程中&#xff0c;音视频封装格式和传输协议扮演着至关重要的角色。它们不仅决定了视频文件的存储方式&#xff0c;还影响着视频在网络上的传输效率和播放体验。今天&#xff0c;我们将深入探讨音视频封装格式和传输协议的相关知识。 音视频封装格式 什…

一个html实现数据库自定义查询

使用场景 应用上线后甲方频繁的找开发查询数据库数据&#xff0c;且没有固定的查询规律&#xff0c;产品经理也没有规划报表需求。 实现方案 后端开放自定义sql查询&#xff0c;屏蔽所有数据库的高危操作&#xff0c;将常用查询的sql放在一个html中的js中直接查询&#xff0…