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

下拉树级带搜索功能

 可以直接复制粘贴到自己的项目里,方法处把接口替换一下

<template><div><el-popoverplacement="bottom"width="200"trigger="click"><el-inputslot="reference"class="mrInput":placeholder="placeholder"v-model="nowSelVal"clearable:disabled="disabled"@input="changeValTime"@change="changeVal"@clear="clearVal"/><div class="customTreeSelectCont"><el-treev-if="searchTit":props="treeProps":load="loadNode"empty-text="暂无数据"lazy:expand-on-click-node="false"@node-click="handleNodeClick"/><ul class="searchUl" v-else><liv-for="(item,index) in searchOptions":key="'searchUl__'+index"@click="selSearchLi(item)">{{item.label}}</li></ul></div></el-popover></div>
</template><script>
export default {name: "customTreeSelect",data() {return {nowSelVal:'',nowSelValBF:'',placeholder:'',disabled:false,treeProps: {label: 'label',value: 'value',children: 'children',isLeaf: 'leaf'},searchTit:true,searchSel:'',searchOptions:[]}},methods: {// 搜索框,实时changeValTime(val) {if(!val){this.searchTit = true}else{this.searchTit = falsethis.getSearchSelFun()}},// 搜索框,失去焦点或用户按下回车changeVal(val) {console.log('changeVal');},// 搜索框-清空clearVal() {this.searchTit = true},getSearchSelFun(){this.searchOptions = [{value: '选项1',label: '黄金糕'},{value: '选项2',label: '黄金糕22'},{value: '选项3',label: '黄金糕33'},]},// tree的懒加载loadNode(node, resolve) {// 第一次获取数据if (node.level === 0) {const arr = [{label: '测试1',value: '111'},{label: '测试2',value: '222'},]return resolve(arr)} else {// 之后点击获取数据if(node.level === 5) return resolve([])const datas = [{label: 'mmm',value: '555'}]return resolve(datas)//   // return resolve([])}},handleNodeClick(data) {this.nowSelVal = data[this.treeProps.label]},selSearchLi(data) {console.log(data);this.nowSelVal = data[this.treeProps.label]},}
}
</script><style lang="scss" scoped>.mrInput{width: 433px;}.searchUl{padding:0;margin:0;list-style: none;li{padding:5px 10px;cursor: pointer;&:hover{background: #f5f7fa;}}}.customTreeSelectCont{max-height: 500px;overflow-y: auto;&::-webkit-scrollbar {width: 6px;}//默认不展示&::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0);}//划过展示,具体写法自己改改&:hover::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.1);}&::-webkit-scrollbar-track {border-radius: 0;background: rgba(0,0,0,0);}}
</style>

 成果是这样的,可以手动试一下

相关文章:

下拉树级带搜索功能

可以直接复制粘贴到自己的项目里,方法处把接口替换一下 <template><div><el-popoverplacement"bottom"width"200"trigger"click"><el-inputslot"reference"class"mrInput":placeholder"placehol…...

【数组、字符串】算法例题

每个题的【方法1】是自己的思路&#xff0c;【其他方法】是力扣上更优的解题思路 目录 一、数组、字符串 1. 合并两个有序数组 ① 2. 移除元素 ① 3. 删除有序数组中的重复项 ① 4. 删除有序数组中的重复项 II ② 5. 多数元素 ① 6. 轮转数组 ② 7. 买卖股票的最佳时机…...

docxTemplater——从word模板生成docx文件

官网文档&#xff1a;Get Started (Browser) | docxtemplater 官网在线演示&#xff1a;Demo of Docxtemplater with all modules active | docxtemplater 源码&#xff1a;https://github.com/open-xml-templating/docxtemplater 不仅可以处理word&#xff08;免费&#xf…...

Linux权限维持后门及应急响应

本次应急响应实验用kali和centos7来充当攻击机和靶机 kali&#xff1a;192.168.10.130 centos7&#xff1a;192.168.10.155 前提&#xff1a; 用kali连接到centos7上面ssh root192.168.10.155 一、SSH软链接 任意密码登录即可发现程度&#xff1a;|||||| ln -sf /usr/sbi…...

git相关指令

1、使用 Git 初始化本地仓库&#xff1a; 在命令行中&#xff0c;首先进入你的项目目录&#xff0c;然后使用以下命令初始化一个本地 Git 仓库&#xff1a; git init2、添加文件到本地仓库&#xff1a; 将你的项目文件添加到本地仓库中&#xff0c;使用以下命令&#xff1a; …...

Apache Doris 2.1 核心特性 Variant 数据类型技术深度解析

在最新发布的 Apache Doris 2.1 新版本中&#xff0c;我们引入了全新的数据类型 Variant&#xff0c;对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列&#xff0c;彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。为了让大家快速…...

accessToken

1、介绍 accessToken&#xff0c;通常是用于身份验证和授权的令牌,它可以用于前端和后端&#xff0c;具体使用方式取决于应用程序的架构和需求。 前端应用 accessToken通常用于向后端API发送请求时进行身份验证和授权。 &#xff08;1&#xff09;前端应用程序会在用户登录成…...

nodeJs 学习

常用快捷键 二、fs模块 回调函数为空&#xff0c;则表示写入成功&#xff01; 练习 const fs require(fs); fs.readFile(../files/成绩.txt, utf-8, (err, dataStr) > {if (err) {console.log(读取失败);return err;}console.log(读取成功);const arr dataStr.split( )co…...

STM32利用AES加密数据、解密数据

STM32利用AES加密数据、解密数据 MD5在线工具Chapter1 STM32利用AES加密数据、解密数据一、头文件二、源文件三、使用 Chapter2 stm32 的 md5计算函数Chapter3 STM32 应用程序加密的一种设计方案前言一、计算AppKey二、自动配置流程三、出厂固件合并 个人总结 MD5在线工具 htt…...

C语言技能数(知识点汇总)

C语言技能数&#xff08;知识点汇总&#xff09; C 语言概述特点不足之处 标准编程机制 数据类型变量数据类型字符类型整数类型符号位二进制的原码、反码和补码 浮点类型布尔类型 常量字面常量const 修饰的常变量#define定义的标识符常量枚举常量 sizeofsizeof(结构体)不要对 v…...

Vue.js+SpringBoot开发企业项目合同信息系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 合同审批模块2.3 合同签订模块2.4 合同预警模块2.5 数据可视化模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 合同审批表3.2.2 合同签订表3.2.3 合同预警表 四、系统展示五、核心代码5.1 查询合同…...

Linux Shell中的echo命令详解

Linux Shell中的echo命令详解 在Linux Shell中&#xff0c;echo命令是一个常用的内置命令&#xff0c;用于在终端上显示文本或字符串。它主要用于显示变量的值&#xff0c;创建文件的内容&#xff0c;或者简单地输出一些信息。在本文中&#xff0c;我们将详细探讨echo命令的用…...

php 页面中下载文件|图片

一、需求 页面中点击下载图片 二、实现 protected function pageLoad(){$filePath $_GET[file];$host $_SERVER[HTTP_HOST];$file http://.$host.$filePath;$fileName basename($filePath);$content file_get_contents($file);ob_clean();$suffixArr explode(., $file…...

2024年企业经济管理与大数据国际会议(ICEEMBD 2024)

2024年企业经济管理与大数据国际会议&#xff08;ICEEMBD 2024&#xff09; 2024 International Conference on Enterprise Economic Management and Big Data 会议简介&#xff1a; 大数据分析在经济管理中发挥着至关重要的作用&#xff0c;它不仅能够提高决策效率和准确性…...

数新网络助阵哈工大国家级项目,共绘数智化新篇章,打造大数据法务平台

2024年1月23日,由哈尔滨工业大学牵头的国家重点研发计划“基于多元关联分析的大数据法律监督关键技术研究”项目2023年度项目进展报告会在杭州成功举办。 本次会议通过线上线下同步开展的形式进行,旨在对项目的进展情况进行深入总结探讨及成果展示,确保项目的研发方向与实际法律…...

React+umi+dva 项⽬实战-lesson6

lesson4-react全家桶及原理解析.mov 项⽬实战 项⽬实战 课堂⽬标资源知识要点起步Generatorredux-sagaumi why umidvadva+umi 的约定安装Umi基本使⽤理解dva移动端cra项⽬简介课堂⽬标 掌握企业级应⽤框架 - umi掌握数据流⽅案 - dva掌握⽣成器函数 - generator掌握redux异步⽅…...

Vue el-table 合并单元格

一般常见的就是下图这种的单列&#xff0c;上下重复进行合并。 有时候可能也会需要多行多列的合并。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&qu…...

面试算法-61-二叉树的右视图

题目 给定一个二叉树的 根节点 root&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 示例 1: 输入: [1,2,3,null,5,null,4] 输出: [1,3,4] 解 class Solution {public List<Integer> rightSideView(T…...

【鸿蒙HarmonyOS开发笔记】动画过渡效果之布局更新动画

概述 动画的原理是在一个时间段内&#xff0c;多次改变UI外观&#xff0c;由于人眼会产生视觉暂留&#xff0c;所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧&#xff0c;对应一次屏幕刷新&#xff0c;而决定动画流畅度的一个重要指标就是帧率FPS&#x…...

过路费的题解

目录 原题描述&#xff1a; 题目描述 输入格式&#xff1a; 输出格式&#xff1a; 样例输入&#xff1a; 样例输出&#xff1a; 数据范围&#xff1a; 提示&#xff1a; 主要思路&#xff1a; code: 原题描述&#xff1a; 题目描述 在某个遥远的国家里&#xff0c;有…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...