当前位置: 首页 > news >正文

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>

相关文章:

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

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

大数据技术之Clickhouse---入门篇---SQL操作、副本

星光下的赶路人star的个人主页 积一勺以成江河&#xff0c;累微尘以崇峻极 文章目录 1、SQL操作1.1 Insert1.2 Update 和 Delete1.3 查询操作1.4 alter操作1.5 导出数据 2、副本2.1 副本写入流程2.2 配置步骤 1、SQL操作 基本上来说传统关系型数据库&#xff08;以 MySQL 为例…...

【Rust 基础篇】Rust Sized Trait:理解Sized Trait与动态大小类型

导言 Rust是一门以安全性和性能著称的系统级编程语言。在Rust中&#xff0c;类型大小的确定在编译期是非常重要的。然而&#xff0c;有些类型的大小在编译期是无法确定的&#xff0c;这就涉及到了Rust中的动态大小类型&#xff08;DST&#xff09;。为了保证在编译期可以确定类…...

前端框架学习-Vue(三)

目录 初识VueVue模板语法数据绑定el和data的两种写法事件的基本使用$emit在子组件中定义方法&#xff0c;执行父组件的方法 Vue中的事件修饰符&#xff1a;键盘事件计算属性监视属性条件渲染列表渲染表单数据收集过滤器 笔记内容来自&#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨v…...

HTML <rt> 标签

实例 一个 ruby 注释&#xff1a; <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby>浏览器支持 元素ChromeIEFirefoxSafariOpera<rt>5.05.538.05.015.0 Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <rt> 标签。 注释&#xf…...

VMware Linux Centos 配置网络并设置为静态ip

在root用户下进行以下操作 1. 查看子网ip和网关 &#xff08;1&#xff09;进入虚拟网络编辑器 &#xff08;2&#xff09;进入NAT设置 &#xff08;3&#xff09;记录子网IP和子网掩码 2. 修改网络配置文件 &#xff08;1&#xff09;cd到网络配置文件路径下 [rootlo…...

【Leetcode 30天Pandas挑战】学习记录

这个系列难度比较低&#xff0c;一题写一篇其实没必要&#xff0c;就全部放到一篇吧 题目列表&#xff1a; 595. Big Countries1757. Recyclable and Low Fat Products 595. Big Countries 原题链接&#xff1a;595. Big Countries Table: World ---------------------- | C…...

微信小程序使用 canvas 2d 实现签字板组件

本文是在微信小程序中使用 canvas 2d 来实现签字板功能&#xff1b; 效果图&#xff1a; 代码&#xff1a; 1、wxml <view><canvas id"canvas"type"2d"bindtouchstart"start"bindtouchmove"move"bindtouchend"end&qu…...

区块链赋能新时代司法体系,中移链打造可信存证服务

近期&#xff0c;某百万级粉丝网红的法律维权之路引发社会关注。其在面对网络造谣行为时积极搜集证据&#xff0c;使用区块链技术将相关信息上链保全&#xff0c;然后将造谣者全部起诉&#xff0c;一系列操作被广大网友喻为是教科书式网络维权。 科技在发展&#xff0c;时代在…...

ELK报错no handler found for uri and method [PUT] 原因

执行后提示no handler found for uri and method post&#xff0c;最新版8.2的问题&#xff1f; 原因&#xff1a; index.mapping.single_type: true在索引上 设置将启用按索引的单一类型行为&#xff0c;该行为将在6.0后强制执行。 原 {type} 要改为 _doc&#xff0c;格式如…...

Sublime操作技巧笔记

同时选中2个文件&#xff1a;自动切换成左右2个界面 格式化代码ctrlshifth&#xff1a; 使用快捷键ctrl shift p调出控制台&#xff0c;输入install package&#xff0c;然后输入html-css-js prettify&#xff0c;进行下载。具体的快捷键在preference > package setting &g…...

JVM | 基于类加载的一次完全实践

引言 我在上篇文章&#xff1a;JVM | 类加载是怎么工作的 中为你介绍了Java的类加载器及其工作原理。我们简单回顾下&#xff1a;我用一个易于理解的类比带你逐步理解了类加载的流程和主要角色&#xff1a;引导类加载器&#xff0c;扩展类加载器和应用类加载器。并带你深入了解…...

Termux实现电脑端远程操作【开启SSH的完整教程】

文章目录 前言一、安装软件1、安装2、启动服务3、特别说明4、添加key二、电脑端连接1、查看ip2、电脑端连接总结前言 上篇文章【安卓手机变身Linux服务器】讲了如何将你的上古安卓手机变废为宝,这节着重为大家解决一个痛点:“手机上操作实在是不方便”。 一、安装软件 1、安…...

java(Collection类)

文章目录 Collection接口继承树Collection接口及方法判断删除其它 Iterator(迭代器)接口迭代器的执行原理 foreach循环Collection子接口1&#xff1a;ListList接口特点List接口方法List接口主要实现类&#xff1a;ArrayListList的实现类之二&#xff1a;LinkedListList的实现类…...

VS2019编译安装OpenMesh8.0

文章目录 一、简介二、相关准备三、编译安装四、举个栗子参考资料一、简介 多边形网格一直以来就是交互式3D图形应用程序中最合适的几何表示,它们足够灵活,可以近似任意形状,并且可以通过当前的图形硬件有效地处理,即使在今天的低成本电脑上也是如此。OpenMesh便是其中一种…...

Python爬虫遇到URL错误解决办法大全

在进行Python爬虫任务时&#xff0c;遇到URL错误是常见的问题之一。一个错误的URL链接可能导致爬虫无法访问所需的网页或资源。为了帮助您解决这个问题&#xff0c;本文将提供一些实用的解决方法&#xff0c;并给出相关代码示例&#xff0c;希望对您的爬虫任务有所帮助。 一、…...

基于Vue+ElementUI+Echarts+G2Plot的大屏设计器,代码完全开源

简介 &#x1f525;DataRoom是一款基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器&#xff0c;具备大屏设计、预览、资源管理、组件管理等能力&#xff0c;支持JSON、MySQL、Oracle、PostgreSQL、HTTP、JavaScript、Groovy等数据集接入&#x…...

Linux - PostgreSQL 适用于9.x 以上的 tar.gz 源码安装与理解 - 报错集锦

这里写目录标题 序言主要内容bash 配置文件个人理解关于初始化 PostgreSQL 数据库的理解 启动方法检查服务器是否在PostgreSQL中运行关闭 postgresql 数据库方法参考链接 序言 PostgreSQL 9.x 以下版本笔者没用过&#xff0c;具体操作看参考链接&#xff0c;笔者就不记录重复操…...

Django使用用户列表的展示和添加

接着上一篇&#xff1a;https://blog.csdn.net/javascript_good/article/details/132027702 来实现用户表的查询和添加 1、创建数据库表 在models.py 中&#xff0c;增加UserInfo类&#xff0c;包括字段姓名、密码、年龄、账号余额、入职时间、所属部门、性别 verbose_name 就…...

kubernetes错误汇总

title: “kubernetes错误汇总” categories: - “技术” tags: - “Kubernetes” - “错误汇总” toc: false original: true draft: false 1、增加 master etcd 报错 1.1、错误描述 由于创建的k8s集群&#xff0c;其中有一个master节点初始化失败&#xff0c;先删除了这个节…...

SearXNG 高级部署方案:自带反向代理的专家级配置

SearXNG 高级部署方案&#xff1a;自带反向代理的专家级配置 【免费下载链接】searxng-docker The docker-compose files for setting up a SearXNG instance with docker. 项目地址: https://gitcode.com/gh_mirrors/se/searxng-docker 想要快速搭建一个安全、隐私保护…...

家庭知识库中心:OpenClaw+Qwen3.5-9B管理个人数字资产

家庭知识库中心&#xff1a;OpenClawQwen3.5-9B管理个人数字资产 1. 为什么需要家庭知识库 去年搬家时&#xff0c;我在整理纸质文件的过程中发现一个严重问题&#xff1a;孩子的疫苗接种记录、房产合同、医疗报告等重要文档分散在多个文件夹中&#xff0c;紧急情况下根本找不…...

Axios 近期安全版本

在执行 npm i 的时候最好执行指定版本&#xff1a;影响版本axios (npm) 0.30.4axios (npm) 1.14.1plain-crypto-js (npm) 4.2.1安全版本axios (npm) < 0.30.3axios (npm) < 1.14.0axios (npm) > 0.30.4axios (npm) > 1.14.1plain-crypto-js (npm) 恶意包已被 np…...

Go Routine 调度与系统线程绑定

Go语言凭借其轻量级并发模型Goroutine&#xff0c;成为高并发场景下的明星语言。Goroutine的魔力源于其高效的调度机制&#xff0c;而它与系统线程的绑定关系更是性能优化的关键。本文将揭开Goroutine调度与线程绑定的技术面纱&#xff0c;从运行时调度器、线程池管理、工作窃取…...

SEO_网站SEO排名下降的五大原因及应对技巧

SEO:网站SEO排名下降的五大原因及应对技巧 在数字营销的世界里&#xff0c;网站的SEO排名对于吸引流量和提升业务是至关重要的。随着搜索引擎算法的不断更新&#xff0c;很多网站会经历SEO排名下降的困境。本文将详细探讨网站SEO排名下降的五大原因&#xff0c;并提供相应的应…...

Linux五种I/O模型详解与性能对比

1. Linux I/O 模型基础概念解析在深入探讨五种I/O模型之前&#xff0c;我们需要先理解几个关键的基础概念。这些概念是理解不同I/O模型差异的基石&#xff0c;也是很多开发者在实际工作中容易混淆的地方。1.1 用户态与内核态Linux系统将运行环境分为用户态(User mode)和内核态(…...

StreamIO:Arduino嵌入式统一I/O流与缓冲区抽象库

1. StreamIO 库概述StreamIO 是一个面向嵌入式 Arduino 生态的轻量级 I/O 抽象封装库&#xff0c;其核心设计目标是统一处理流式数据&#xff08;Stream&#xff09;与静态内存缓冲区&#xff08;array buffer&#xff09;的读写操作。在传统 Arduino 开发中&#xff0c;开发者…...

Open UI5 源代码解析之780:Label.js

源代码仓库: https://github.com/SAP/openui5 源代码位置:src\sap.m\src\sap\m\Label.js sap.m.Label 文件深度解析与项目作用说明 一、文件定位与整体职责 Label.js 位于 sap.m 组件库中,是一个非常基础却影响面极广的控件实现文件。它定义了 sap.m.Label 的完整行为,…...

cool-admin(midway版)前端权限指令:自定义指令实现权限控制的完整指南

cool-admin(midway版)前端权限指令&#xff1a;自定义指令实现权限控制的完整指南 【免费下载链接】cool-admin-midway &#x1f525; cool-admin(midway版)一个很酷的后台权限管理框架&#xff0c;模块化、插件化、CRUD极速开发&#xff0c;永久开源免费&#xff0c;基于midwa…...

别再只改Grafana了!实现1秒实时刷新的完整避坑指南:从min_refresh_interval到Prometheus scrape_interval

别再只改Grafana了&#xff01;实现1秒实时刷新的完整避坑指南&#xff1a;从min_refresh_interval到Prometheus scrape_interval 当你盯着Grafana仪表盘上那个"1s"的刷新按钮&#xff0c;却发现数据纹丝不动时&#xff0c;那种感觉就像在等一壶永远烧不开的水。作为…...