element-plus el-cascader 级联组件清空所选数据方法

news2024/10/7 6:49:50
话不多说直接上代码
import {ref, Ref, reactive} from 'vue';
const cascaderOrg:Ref = ref<any>(null)  //获取级联组件的ref  ref名称即cascaderOrg
cascaderOrg.value.cascaderPanelRef.clearCheckedNodes(); //清空所选数据

借用官方文档展示该方法
在这里插入图片描述

相关细节描述及全部代码有需要可复制
import {ref, Ref, reactive, onMounted, nextTick} from 'vue';
import type { FormInstance,FormRules,CascaderProps } from 'element-plus';
import { ElMessage } from 'element-plus'

const form = reactive({villageName: ''}); //我的form表单数据
const cascaderOrg:Ref = ref<any>(null)  //获取级联组件的ref  ref名称即cascaderOrg

// 级联组件配置props,不需要可删除
const props:CascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false,//在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值
  expandTrigger: 'hover' as const
}

// 级联组件选项变化事件,此处根据自己需要进行代码修改,我这边的要求是如果选项的level小于5则不可选,展示提示
const handleOrgChange = (val)=>{
  let nodes = cascaderOrg.value.getCheckedNodes(); 
  if(!!val && !!nodes && nodes.length>0 && nodes[0]?.level < 5){
    ElMessage({
      message: '只能选择村级数据',
      type: 'warning',
    })    
    nextTick(()=>{
      cascaderOrg.value.cascaderPanelRef.clearCheckedNodes();
      form.villageName = '';
    })
    return
  }
}

<el-cascader
                ref="cascaderOrg"
                class="w-full"
                clearable
                :options="orgData"
                :props="props" //如果不需要配置就可以删除了啊,
                filterable
                :show-all-levels="false"
                @change="handleOrgChange"
                v-model="form.villageName"></el-cascader>

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

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

相关文章

3.简单场景构建

在新建的项目中&#xff0c;默认存在 Main Camera 和 Directional Light两个对象。若是缺失&#xff0c;可通过选择菜单中的 Game Object->Camera 和 Geme Object->Light->Directional Light进行创建。 1.添加地形及底图 通过在Cesium面板中选择 Cesium World Terrai…

redis如何实现缓存预热

在业务系统中&#xff0c;我们需要在程序启动的时候加载一些常用的数据到内存数据库中&#xff0c;从而减少业务数据库的压力。这就是我们常提到的缓存预热。官方一点的解释是这样的&#xff1a; 缓存预热是一种在程序启动或缓存失效之后&#xff0c;主动将热点数据加载到缓存中…

使用注解新开事务 @Transactional

使用注解新开事务 Transactional(propagation Propagation.REQUIRES_NEW)

QSS样式表的使用

QSS样式表的使用 Chapter1 【Qt】样式表的使用——设置样式的方法一、简述二、开始总结1、先谈谈我们设置样式有几种方法2、再谈谈这几种设置样式方法的优缺点 个人建议 Chapter2 Qt样式表总结Chapter3 【QT】史上最全最详细的QSS样式表用法及用例说明Chapter4 Qt样式表使用总结…

计算机的计算单位

文章目录 前言一、容量单位二、速度单位1.网络速度2.CPU频率 总结 前言 今天给大家介绍计算机的计算单位&#xff0c;分为两个板块&#xff1a;容量单位、速度单位。 一、容量单位 对于容量单位&#xff0c;大家在日常生活中应该都有所了解&#xff0c;比如说 768M 的光盘、4…

内网穿透的应用-使用eXtplorer本地搭建免费在线文件管理器并实现远程登录

文章目录 1. 前言2. eXtplorer网站搭建2.1 eXtplorer下载和安装2.2 eXtplorer网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1. 前言 通过互联网传输文件&#xff0c;是互联网最重要的应用之一&#xff0c;无论是…

PMP考试知识点(干货码住)

一、需要记忆的公式 1. 三点估算是指通过期望值、标准差和方差来进行估算的方法&#xff1b; 2. 关键路径计算包括ES、EF、LS、LF、总浮动时间和自由浮动时间等指标&#xff1b; 3. 挣值计算是一种常用的项目管理方法&#xff0c;包括CPI、SPI、ETC、EAC和TCPI等指标&#x…

为什么MyBatis是Java数据库持久层的明智选择

在Java应用程序的开发中&#xff0c;选择合适的数据库持久层框架至关重要。一个明智的选择可以帮助开发人员更好地管理数据库交互、提高性能和简化开发工作。 &#xff08;一&#xff09;为什么要选MyBatis JDBCHibernate / JPAMyBatis简单直接ORM轻量动态SQL关联查询开发效率…

VAE模型(详细推导+实例代码)

文章目录 EM算法思路E步M步直观感觉 GMM模型VAEVAE思想从GMM到VAE公式推导重参数VAE神经网络另一个视角的VAE思想为什么引入encoder为什么要重参数噪声与重建 Discrete VAE 本文会从EM算法&#xff0c;GMM模型一步一步的的推导&#xff0c;在过渡到VAE模型&#xff0c;如果有熟…

博华网龙设备命令执行漏洞复现 [附POC]

文章目录 博华网龙设备命令执行漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 博华网龙设备命令执行漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&…

【Vue】之Vuex的入门使用,取值,修改值,同异步请求处理---保姆级别教学

一&#xff0c;Vuex入门 1.1 什么是Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理库。它用于管理应用程序中的共享状态&#xff0c;它采用集中式存储管理应用的所有组件的状态&#xff0c;使得状态的管理变得简单和可预测 官方解释&#xff1a;Vuex 是一个专为 Vue.js 应…

Python数据分析实战-实现Kruskal-Wallis H检验(附源码和实现效果)

实现功能 当需要比较多个&#xff08;大于两个&#xff09;独立样本之间的差异时&#xff0c;可以使用非参数的Kruskal-Wallis H检验。Kruskal-Wallis H检验是一种非参数的方差分析方法&#xff0c;用于检验多个独立样本是否来自于相同的总体分布。 在Python中&#xff0c;你…

英国生物技术公司【AstronauTx】完成4800万英镑A轮融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于英国伦敦的生物技术公司【AstronauTx】今日宣布已完成4800万英镑A轮融资 。 本轮融资由诺华风险基金领投&#xff0c;布兰登资本&#xff08;Brandon Capital&#xff09;、MPM Capital、…

产品经理视角 | API接口知识小结

应用程序接口API&#xff08;Application Programming Interface&#xff09;&#xff0c;是提供特定业务输出能力、连接不同系统的一种约定。这里包括外部系统与提供服务的系统&#xff08;中后台系统&#xff09;或后台不同系统之间的交互点。包括外部接口、内部接口&#xf…

下一代Docker来了,会让部署更加丝滑吗?

下一代Docker来了&#xff0c;会让部署更加丝滑吗&#xff1f; 目录 一、Docker是什么&#xff1f; 二、Docker 的几个名词概念 2.1、镜像&#xff08;Image&#xff09; 2.2、容器 (Container) 2.3、仓库 (Repository) 三、容器和虚拟机比较 四、Docker 运行环境 五、…

因子分析(SPSS和Python)

一、源数据 二、SPSS因子分析 2.1.导入数据 2.2.标准化处理 由于指标的量纲不同&#xff08;单位不一致&#xff09;&#xff0c;因此&#xff0c;需要对数据进行标准化处理 2.3.因子分析 点击“确定”后&#xff0c;再回到“总方差解释”表格&#xff0c;以“旋转载荷平方和…

Java 基于SpringBoot的某家乡美食系统

1 简介 《Java 基于SpringBoot的某家乡美食系统》该项目含有源码、文档等资料、配套开发软件、软件安装教程等。系统功能完整&#xff0c;适合作为毕业设计、课程设计、数据库大作业学习使用。 功能介绍 这个项目是基于 SpringBoot和 Vue 开发的地方美食系统&#xff0c;包括…

STM32F4X I2C LM75

STM32F4X I2C LM75 I2C协议讲解I2C接线I2C协议波形I2C起始信号I2C停止信号I2C应答信号I2C寻址I2C地址格式 I2C数据传输 LM75ALM75A介绍LM75A引脚说明LM75A地址LM75A寄存器LM75A I2C协议写配置寄存器读配置寄存器写Tos和Thyst寄存器读Tos Thyst Temp寄存器LM75A温度计算 LM75A例…

帆软报表之填报报表

1、配置数据源 URL填充格式&#xff1a;jdbc:mysql://127.0.0.1:3306/yq_iwater_ads 2、新建普通报表&#xff0c;配置数据库查询 3、编辑单元格 3.1、插入公式 ‘每月营业厅情况统计\n’ replace($month_id,‘-’,‘年’)‘月’ 3.2、插入数据列 3.3、关联数据列 3.4、隐藏不…

【java学习】面向对象特征之一:封装和隐藏(23)

文章目录 信息的封装和隐藏 信息的封装和隐藏 Java 中通过将数据声明为私有的 (private) 变量&#xff0c; 再提供 公共的&#xff08; public &#xff09;方法 &#xff1a;getXxx() 和 setXxx() 实现对该属性的操作&#xff0c;以实现下述目的&#xff1a; 隐藏一个类中不需…