uniapp 无限级树形结构面包屑、单选-多选、搜索、移除功能插件,基于【虚拟列表】高性能渲染海量数据,加入动态高度、缓冲区

hyq-tree-vtw

无限级树形结构面包屑、单选-多选、搜索、移除功能

示例项目

示例项目

单选-user

单选只选user

单选-任意一项

单选任意选择

多选-关联下级

多选关联下级

多选-任意一项

多选任选一级

已选择数据弹框

已选数据

说明

  • 本插件需要使用uni-popup、uni-transition用于已选择数据弹框,因此需要有这些依赖,请自行导入
  • 本插件基于【虚拟列表】高性能渲染海量数据,加入动态高度、缓冲区
  • 本人只在微信小程序端和H5 使用Chrome浏览器测试和微信开发者工具

安装方式

本组件符合easycom规范,HBuilderX 3.1.0起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册`components

基本用法

  <hyq-tree-vtwlabel="label"children="children"key-code="keyCode":tree-node="treeNode":feed-back-list="feedBackList"is-checkshow-search@handleConfirm="handleConfirm"></hyq-tree-vtw>

<script>import {treeNode} from './data.js'export default {data() {return {treeNode,feedBackList: []}},methods: {handleConfirm(val) {console.log('val', val)}}}
</script>

dat.js 数据生成

const treeNode = [{name: '一级',id: '1',user: false,children: [{name: '二级-1',id: '2-1',user: false,children: [{name: '三级-1',id: '3-1',user: false,children: [{name: '四级-1',id: '4-1',user: false,children: [{name: '五级-1',id: '5-1',user: false,children: [{name: '六级-1',id: '6-1',user: true,children: []},...makeTreeNode(5)]},...makeTreeNode(4)]},...makeTreeNode(3)]},...makeTreeNode(2)],},...makeTreeNode(1)]},{name: '一级-2',id: '1-1-1',user: false,children: [{name: '1-二级-1',id: '1-6-1665',user: false,children: [{name: '1-三级-1',id: '1-5-1',user: false,children: [{name: '1-四级-1',id: '1-6-166',user: true,children: [...makeTreeNode('1-四级-1')]},...makeTreeNode('1-三级-1')]},...makeTreeNode('2-1')]},...makeTreeNode('1-1')]},
]function makeTreeNode(leval) {let treeNoneList = []for (let k = 0; k < 100; k++) {let name = `${leval}级-${k}`treeNoneList.push({name,id: guid(),user: true})}return treeNoneList
}function guid() {function S4() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);}return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}export {treeNode
};

传入的数据结构说明-treeNode

[{id: 664214366998,name: "校长443",children: [{id: 885655454545454545678,name: "小陆"}]},
]

选中返回的结果feedBackList:返回一个二维数组

[{id: xxx,name: "xxx",path:[],//该值的路径},
]

功能说明

1、树形结构展示

2、包含搜索框、面包屑导航

3、单选模式(只选user)、单选模式(选择任意一项)、多选模式(关联下级)、多选模式(选择任意一项)

4、只需传checkList字段就可以回显默认选中

5、已选数据可以进行移除

属性

属性名类型默认值说明
isCheckBooleanfalse是否选中
showSearchBooleanfalse是否开启搜索
keyCodeStringid数据唯一标识(id列的属性名)
labelStringname指定选项标签为选项对象的某个属性值
childrenStringchildren指定选项的子选项为选项对象的某个属性值
treeNodeArray[]trees 传入的树形结构,每个对象必须包含唯一的id值
multipleBooleanfalse是否开启多选模式
nodesBooleanfalse是否开启单选模式的只选择子项,true :只选子项、false:任意一项
hasPathBooleanfalse是否开启选中的数据包含路径
checkStrictlyBooleanfalse多选模式下是否要关联下级
feedBackListArray[]选中的列表

事件

事件名说明返回值
@handleConfirm点击完成按钮时触发事件参数(选中的项值)
@confirmSearch搜索完成后触发事件参数(搜索结果的项值)

单选模式(只选user)

<template><view class="content"><hyq-tree-vtw :label="dprop.label" :children="dprop.children" :key-code="dprop.keyCode":has-path="dprop.hasPath" :nodes="dprop.nodes" :multiple="dprop.multiple":checkStrictly="dprop.checkStrictly" :tree-node="treeNode" :feed-back-list="feedBackList" is-checkshow-search @handleConfirm="handleConfirm"></hyq-tree-vtw></view>
</template><script>import {treeNode} from './data.js'export default {data() {return {treeNode,feedBackList: [],dprop: { //单选模式选userlabel: 'name',children: 'children',keyCode: 'id',multiple: false,nodes: true,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log('val', val);// 获取上一个页面var pages = getCurrentPages(); //当前页面栈var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
</script><style>
</style>

单选模式(选择任意一项)

<template><view class="content"><hyq-tree-vtw :label="cprop.label" :children="cprop.children" :key-code="cprop.keyCode":has-path="cprop.hasPath" :nodes="cprop.nodes" :multiple="cprop.multiple":checkStrictly="cprop.checkStrictly" :tree-node="treeNode" :feed-back-list="feedBackList" is-checkshow-search @handleConfirm="handleConfirm"></hyq-tree-vtw></view>
</template><script>import {treeNode} from './data.js'export default {data() {return {treeNode,feedBackList: [],cprop: { //单选模式(任意一项)label: 'name',children: 'children',keyCode: 'id',multiple: false,nodes: false,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log('val', val);// 获取上一个页面var pages = getCurrentPages(); //当前页面栈var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
</script><style>
</style>

多选模式(关联下级)

<template><view class="content"><hyq-tree-vtw :label="bprop.label" :children="bprop.children" :key-code="bprop.keyCode":has-path="bprop.hasPath" :nodes="bprop.nodes" :multiple="bprop.multiple":checkStrictly="bprop.checkStrictly" :tree-node="treeNode" :feed-back-list="feedBackList" is-checkshow-search @handleConfirm="handleConfirm"></hyq-tree-vtw></view>
</template><script>import {treeNode} from './data.js'export default {data() {return {treeNode,feedBackList: [],bprop: {label: 'name',children: 'children',keyCode: 'id',multiple: true,checkStrictly: true,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log('val', val);// 获取上一个页面var pages = getCurrentPages(); //当前页面栈var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
</script><style>
</style>

多选模式(选择任意一项)

<template><view class="content"><hyq-tree-vtw :label="aprop.label" :children="aprop.children" :key-code="aprop.keyCode":has-path="aprop.hasPath" :nodes="aprop.nodes" :multiple="aprop.multiple":checkStrictly="aprop.checkStrictly" :tree-node="treeNode" :feed-back-list="feedBackList" is-checkshow-search @handleConfirm="handleConfirm"></hyq-tree-vtw></view>
</template><script>import {treeNode} from './data.js'export default {data() {return {treeNode,feedBackList: [],aprop: {label: 'name',children: 'children',keyCode: 'id',multiple: true,hasPath: false}}},onLoad() {},methods: {handleConfirm(val) {console.log('val', val);// 获取上一个页面var pages = getCurrentPages(); //当前页面栈var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象beforePage.$vm.setConfirmData(val); //触发上一个页面中的update方法}}}
</script><style>
</style>

github源码地址

github

vue2版本已发布到uniapp插件市场

vue2

vue3版本已发布到uniapp插件市场

vue3

掘金

掘金

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

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

相关文章

企业培训系统开发:构建灵活高效的学习平台

企业培训系统的开发在当今数字化时代是至关重要的。本文将介绍一些关键技术和代码示例&#xff0c;以帮助您构建一个灵活、高效的企业培训系统。 1. 技术选型 在开始企业培训系统的开发之前&#xff0c;首先需要选择合适的技术栈。以下是一个基本的技术选型示例&#xff1a;…

Python(wordcloud):根据文本数据(.txt文件)绘制词云图

一、前言 本文将介绍如何利用python来根据文本数据&#xff08;.txt文件&#xff09;绘制词云图&#xff0c;除了绘制常规形状的词云图&#xff08;比如长方形&#xff09;&#xff0c;还可以指定词云图的形状。 二、相关库的介绍 1、安装相关的库 pip install jieba pip i…

HTTP和TCP代理原理及实现,主要是理解

Web 代理是一种存在于网络中间的实体&#xff0c;提供各式各样的功能。现代网络系统中&#xff0c;Web 代理无处不在。我之前有关 HTTP 的博文中&#xff0c;多次提到了代理对 HTTP 请求及响应的影响。今天这篇文章&#xff0c;我打算谈谈 HTTP 代理本身的一些原理&#xff0c;…

C++完成Query执行sql语句的接口封装和测试

1、在LXMysql.h 创建Query执行函数 //封装 执行sql语句 if sqllen 0 strlen获取字符长度bool Query(const char*sql,unsigned long sqllen0); 2、在LXMysql.cpp编写函数 bool LXMysql::Query(const char* sql, unsigned long sqllen){if (!mysql)//如果mysql没有初始化好{c…

使用qtquick调用python程序

一. 内容简介 使用qtquick调用python程序 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3pytorch 安装pytorch(http://t.csdnimg.cn/GVP23) 2.4QT 5.14.1 新版QT6.4,&#xff0c;6.5在线安装经常失败&#xff0c;而5.9版本又无法编译64位程序&#xf…

UE4 4.21使用编辑器蓝图EditorBlueprint方法

在UE4 4.21中&#xff0c;编辑器蓝图&#xff08;Editor Blueprint&#xff09;是一个强大的工具&#xff0c;允许开发者扩展和自定义Unreal编辑器的功能。通过编辑器蓝图&#xff0c;我们可以创建自定义的工具和功能&#xff0c;以优化开发流程。 本教程将指导您如何在UE4 4.…

【LeetCode-剑指offer】--19.验证回文串II

19.验证回文串II 方法&#xff1a;双指针 首先考虑如果不允许删除字符&#xff0c;如何判断一个字符串是否是回文串。常见的做法是使用双指针。定义左右指针&#xff0c;初始时分别指向字符串的第一个字符和最后一个字符&#xff0c;每次判断左右指针指向的字符是否相同&#…

技术学习|CDA level I 多维数据透视分析

对基于多源表的结构数据进行商业智能分析&#xff0c;可以帮助决策者从多个不同业务角度对业务行为结果进行观测&#xff0c;进而帮助决策者全面、精确地定位业务问题&#xff0c;实现商业洞察的相关内容。通过商业智能分析产出的分析成果被统称为商业智能报表&#xff0c;简称…

ubuntu创建pytorch-gpu的docker环境

文章目录 安装docker创建镜像创建容器 合作推广&#xff0c;分享一个人工智能学习网站。计划系统性学习的同学可以了解下&#xff0c;点击助力博主脱贫( •̀ ω •́ )✧ 使用docker的好处就是可以将你的环境和别人的分开&#xff0c;特别是共用的情况下。本文介绍了ubuntu环境…

4.快速实现增删改查,模糊查询功能

打开springboot项目&#xff0c;在com.example下建包common,在common下新建Result.java 4.1封装统一的返回数据结构 1.在Result.java中编写如下代码&#xff1a; private static final String *SUCCESS*"0"; private static final String *ERROR*"-1"; p…

智能穿戴时代 | 米客方德SD NAND的崭新优势

SD NAND在智能穿戴上的优势 SD NAND是一种可以直接焊接在智能穿戴设备主板上的存储芯片&#xff0c;其小型化设计有助于紧凑设备尺寸&#xff0c;同时提供可靠的嵌入式存储解决方案。 这种集成设计减少了空间占用&#xff0c;同时确保设备在高度活动的环境中更为稳定。SD NAND…

[足式机器人]Part2 Dr. CAN学习笔记-动态系统建模与分析 Ch02-3流体系统建模

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-动态系统建模与分析 Ch02-12课程介绍电路系统建模、基尔霍夫定律 流量 flow rate q q q m 3 / s m^3/s m3/s 体积 volume V V V m 3 m^3 m3 高度 heigh h h h m m m 压强 pressure p p p …

Jvm垃圾收集器系列之Parallel Scavenge收集器(个人见解仅供参考)

问&#xff1a;什么是Parallel Scavenge&#xff1f; 答&#xff1a;Parallel Scavenge是Java HotSpot虚拟机中的一种垃圾收集器&#xff0c;它主要用于提高应用程序的吞吐量。 问&#xff1a;Parallel Scavenge的主要目标是什么&#xff1f; 答&#xff1a;Parallel Scavenge的…

Azure Machine Learning - 人脸识别任务概述与技术实战

Azure AI 人脸服务提供了可检测、识别和分析图像中的人脸的 AI 算法。 人脸识别软件在许多不同情形中都十分重要&#xff0c;例如识别、无接触访问控制和实现隐私的人脸模糊。你可以通过客户端库 SDK&#xff0c;或者直接调用 REST API 使用人脸服务。 目录 一、人脸识别服务场…

【Android】如何设置应用程序启动Activity(应用启动时显示的界面)

前言 在Android中&#xff0c;AndroidManifest.xml文件可以通过修改来设置应用启动时显示的界面&#xff0c;即启动Activity。 操作步骤 打开AndroidManifest.xml文件。 在文件中找到想要设置为启动Activity的<activity>元素。该元素通常在<application>元素内部…

非小米电脑安装小米电脑管家

博客地址 雪饼 (xue6ing.cn) 前言 小米电脑管家是一款专为小米笔记本用户设计的电脑管理软件。它提供了一系列强大的功能&#xff0c;包括驱动管理、硬件信息、设备互联等。其内置了小米的HyperConnect跨端智联功能。 如果是小米手机用户的话非常建议你安装&#xff01;因为…

EasyExcel写出包含多个sheet页的Excel

https://blog.csdn.net/qq_38751895/article/details/131852740

虚拟机添加显示屏

1、关闭虚拟机&#xff0c;虚拟机在为关机的情况下&#xff0c;虚拟机设置->显示器->监视器 都是灰色的&#xff0c;不能设置&#xff1b; 2、虚拟机设置->显示器->监视器 “监视器数量” 设置为2 “拉伸模式” 不要勾选 点确定 3、点击 查看->循环使用多个…

增删改查语句实现了解不同的函数与特殊字符unionunion all区别

目录 一、crud&#xff08;增删改查&#xff09; 1.1、查询 概念&#xff1a; 语法&#xff1a; 分组 筛选 排序 分页 1.2、增加 概念&#xff1a; 语法&#xff1a; 方式一&#xff1a;insert into 表名 values (值&#xff0c;值....) 方式二&#xff1a;&#x…

福建科立讯通信 指挥调度管理平台 多处文件上传漏洞复现

0x01 产品简介 福建科立讯通信指挥调度管理平台是一个专门针对通信行业的管理平台。该产品旨在提供高效的指挥调度和管理解决方案,以帮助通信运营商或相关机构实现更好的运营效率和服务质量。该平台提供强大的指挥调度功能,可以实时监控和管理通信网络设备、维护人员和工作任…