el-cascader级联选择器加载远程数据、默认开始加载固定条、可以根据搜索加载远程数据。

  • 加载用户列表分页请求、默认请求20条数据。想添加远程搜索用户功能。原有的方法filter-method不能监听到输入清空数据的时候。这样搜索完无法返回默认的20条数据。
  • 直接监听级联选择的v-model绑定的值是无法检测到用户自己输入的。

解决思路:

  1. el-cascader 没有提供监听用户输入的内容、要单独获取到input添加监听事件。
  2. 添加完事件、可以watch监听下用户的输入。清空输入时候可以重新加载数据。
  3. 使用befor-filter先做根据搜索内容请求接口(函数返回true才会执行filter-method)、再调用filter-method返回true就行了。
    在这里插入图片描述
    在这里插入图片描述

下面是个模拟的加载用户列表的demo

<template><div class="page"><el-cascader v-model="model.userIds" class="user-cascader" :options="userList" filterable :before-filter="beforeFilterUser"   :filter-method="filterUser" clearable @change="changeUser" ></el-cascader></div>
</template><script>
export default {data() {return {model: {userIds: [],},userList: [], //用户列表search: '',timer: null}},watch: {//监听搜索内容search(val, old) {if(this.timer) clearTimeout(this.timer)this.timer = setTimeout(async ()=> {if(!val) this.loadUserList()},300)}},mounted() {this.init()this.loadUserList()},methods: {//添加监听事件init() {this.$nextTick(()=> {let dom = document.getElementsByClassName('user-cascader')[0]let inputDom = document.getElementsByClassName('el-input__inner')[0]inputDom.addEventListener('input',(e)=> {// console.log(e.target.value,'输入的是')this.search = e.target.value})})},//加载用户列表loadUserList(keyword) {// ...// this.userList = res.data},async beforeFilterUser(node, keyword) {//先根据关键词加载用户列表 再return trueawait this.loadUserList(keyword)return true},filterUser(node, keyword) {return true},changeUser(val) {}}
}
</script><style scoped lang="less">
.page {padding: 20px;
}
</style>

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

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

相关文章

list交并补差集合

list交并补差集合 工具类依赖 <dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.8.1</version> </dependency><dependency><groupId>commons-collections&…

二叉树的遍历(先序遍历,中序遍历,后序遍历)递归与非递归算法

目录 一、先序遍历题目链接1.递归2.非递归 二、中序遍历题目链接1.递归2.非递归 三、后序遍历题目链接1.递归2.非递归 一、先序遍历 先序遍历&#xff1a;先遍历一颗树的根节点&#xff0c;后遍历左子树&#xff0c;最后遍历右子树 先序遍历序列&#xff1a; 1 -> 2 -> 4…

PHP-mysql学习笔记

如题 记录发送emoji数据无法正常显示的问题PHPMysql 记录 发送emoji数据无法正常显示的问题 问题描述 前端发送关于emoji的表情数据给php,php写入mysql php接收到了数据,但无法写入写入过后返回前端无法正常显示 PHP 在对应的pdd函数中设置字符集为utf8mb4 Mysql emoji数…

Linux常用命令

1 查找命令 grep命令 命令是一种强大的文本搜索工具 格式&#xff1a; grep [option] pattern [file] 可使用 —help 查看更多参数。 使用实例&#xff1a; ps -ef | grep sshd 查找指定 ssh 服务进程 ps -ef | grep sshd | grep -v grep 查找指定服务进程&#xff0c;排除…

采用 SpringDoc、javadoc 无注解零入侵基于java注释

今天在gitee上学习到一个&#xff0c;个人觉得非常使用的功能。就是采用 SpringDoc、javadoc 无注解零入侵基于java注释&#xff0c;只需把注释写好 无需再写一大堆的文档注解了。 下面是源码的地址 RuoYi-Vue-Plus: 后台管理系统 重写RuoYi-Vue所有功能 集成 Sa-TokenMybati…

OpenSSL产生ECC密钥对,及私钥格式(PKCS1<--->PKCS8)转换

前言 1. OpenSSL产生ECC密钥对 openssl ecparm -name <curve_name> -genkey -out <private_key_file> 其中&#xff1a; <curve_name> 是椭圆曲线名称&#xff0c;例如primev1、secp384r1、secp256r1等。<private_key_file> 是要生成的私钥文件的路…

RabbitMQ 过期时间(TTL)

TTL,Time to Live的简称&#xff0c;即过期时间&#xff0c;RabbitMQ可以对消息和队列设置TTL。 RabbitMQ支持设置队列的过期时间和消息的过期时间。如果设置队列的过期时间则队列中所有的消息都有相同的过期时间。如果设置消息的过期时间则每条消息的过期时间则可以不同。如两…

LeetCode 27题:移除元素

题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长…

攻防世界-reverse-logmein

题目描述&#xff1a;菜鸡开始接触一些基本的算法逆向了 下载附件&#xff0c;是一个可执行程序 1. 思路分析 逆向出来看看代码 从代码中来看&#xff0c;密码长度需要和V8相等&#xff0c;并且每一个字符的运算结果需要满足 s[i] (char)(v8[i % v6 - 8] ^ v8[i]) 但是这…

codeforces Split Into Two Sets

Polycarp was recently given a set of n (number n — even) dominoes. Each domino contains two integers from 11 to n. Can he divide all the dominoes into two sets so that all the numbers on the dominoes of each set are different? Each domino must go into e…

libtorch::Tensor与Eigen::Tensor互相转换

1. Eigen::Tensor转libtorch::Tensor Eigen::Tensor<float, 3> a{2,4,3};a.setRandom();a(1,2,1) 11.0;/*核心*/torch::Tensor b torch::from_blob(a.data(), {1, a.dimension(2), a.dimension(1), a.dimension(0)});/*核心*/b b.permute({0, 3, 2, 1});std::cout <…

vue2、vue3生命周期详解以及对比

文章目录 对比vue2-vue3vue3生命周期生命周期的主要阶段详情 vue2 生命周期生命周期钩子函数 总共11个 常用的8个按照这四个阶段我们对应有八个生命周期钩子函数vue生命周期使用场景 对比vue2-vue3 如果熟悉vue2的话&#xff0c;vue3信手拈来&#xff0c;看图 vue3生命周期 on…

impala使用md5(3条命令搞定)

文章目录 前言1、 找到当前使用的hive版本的hive-exec.jar文件2、上传到HDFS上。改权限3、impala加载function总结 前言 impala没有md5函数。 1、 找到当前使用的hive版本的hive-exec.jar文件 我们用的CDH&#xff0c;所以hive-exec.jar在每台服务器上都准备好的。 我装了loca…

AnimatedVectorDrawable矢量图动画的使用和修改

文章目录 一、前言二、一个矢量图文件三、参考链接 一、前言 矢量可绘制对象可以提供比较复杂的动画效果&#xff0c;只是绘制比较复杂&#xff0c;这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候&#…

解决多线程环境下单例模式同时访问生成多个实例

如何满足单例&#xff1a;1.构造方法是private、static方法、if语句判断 ①、单线程 Single类 //Single类&#xff0c;定义一个GetInstance操作&#xff0c;允许客户访问它的唯一实例。GetInstance是一个静态方法&#xff0c;主要负责创建自己的唯一实例 public class LazySi…

HCIP BGP选路规则总结

选路前提条件 多条BGP路由目标相同&#xff0c;且均可优(下一跳可达、同步关闭)&#xff0c;具有相同的优先级&#xff08;管理距离&#xff09;。 1、优选Preference_Value值最高的路由&#xff08;私有属性&#xff0c;仅本地有效&#xff09;。 不传递 权限最高属性 可…

【IDEA+Spark Streaming 3.4.1+Dstream监控套接字流统计WordCount保存至MySQL8】

【IDEASpark Streaming 3.4.1Dstream监控套接字流统计WordCount保存至MySQL8】 把DStream写入到MySQL数据库中 Spark 3.4.1MySQL 8.0.30sbt 1.9.2 文章目录 【IDEASpark Streaming 3.4.1Dstream监控套接字流统计WordCount保存至MySQL8】前言一、背景说明二、使用步骤1.引入库2…

【数字IC基础】低功耗设计

低功耗技术 功耗构成静态功耗(漏电功耗)动态功耗翻转功耗(Switch Power)短路功耗(Internal Power) 不同类型的标准单元的功耗 低功耗设计方法降低芯片工作电压多阈值工艺方法电源门控&#xff08;Power Gating&#xff09;多电压域(Multi-Voltage Domain)体偏置门控时钟一个简单…

微服务使用步骤

Maven的依赖冲突解决方案&#xff1a; 路径最短原则配置优先原则破坏规则则使用排除 SpringBoot场景启动器starter的开发流程 c3p0-spring-boot-starter自定义场景启动器test-c3p0调用自定义场景启动器SpringBoot自动装配SpringBoot应用启动原理nacos服务治理 安装 启动bin/s…

算法leetcode|66. 加一(rust重拳出击)

文章目录 66. 加一&#xff1a;样例 1&#xff1a;样例 2&#xff1a;样例 3&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 66. 加一&#xff1a; 给定一个由 整数 组成的 非…