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

news2024/10/5 19:21:11

hyq-tree-vtw

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

示例项目

示例项目

单选-user

单选只选user

单选-任意一项

单选任意选择

多选-关联下级

多选关联下级

多选-任意一项

多选任选一级

已选择数据弹框

已选数据

说明

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

安装方式

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

基本用法

  <hyq-tree-vtw
    label="label"
    children="children"
    key-code="keyCode"
    :tree-node="treeNode"
    :feed-back-list="feedBackList"
    is-check
    show-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-check
			show-search @handleConfirm="handleConfirm"></hyq-tree-vtw>
	</view>
</template>

<script>
	import {
		treeNode
	} from './data.js'
	export default {
		data() {
			return {
				treeNode,
				feedBackList: [],
				dprop: { //单选模式选user
					label: '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-check
			show-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-check
			show-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-check
			show-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.coloradmin.cn/o/1357591.html

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

相关文章

Maven多模块项目架构配置介绍和实战

Maven多模块项目架构配置介绍和实战

项目采用的是Maven多模块架构&#xff0c;项目的部分子模块的pom.xml中重复引用了相同的JAR包。很明显&#xff0c;当初在配置Maven模块的时候&#xff0c;没有考虑清楚各个模块的架构职责&#xff0c;同时也不了解Maven模块依赖的传递性。主要介绍一下Maven多模块的配置思路和…
阅读更多...
基于深度学习大模型实现离线翻译模型私有化部署使用，通过docker打包开源翻译模型，可到内网或者无网络环境下运行使用，可以使用一千多个翻译模型语言模型进行翻译

基于深度学习大模型实现离线翻译模型私有化部署使用，通过docker打包开源翻译模型，可到内网或者无网络环境下运行使用，可以使用一千多个翻译模型语言模型进行翻译

基于深度学习大模型实现离线翻译模型私有化部署使用，通过docker打包开源翻译模型，可到内网或者无网络环境下运行使用，可以使用一千多个翻译模型语言模型进行翻译，想要什么语种直接进行指定和修改就行。 环境要求，电脑内存低于8G建议不要尝试了，有无GPU都可以运行，但是有…
阅读更多...
geemap学习笔记041：Landsat Collection2系列数据去云算法总结

geemap学习笔记041：Landsat Collection2系列数据去云算法总结

前言 去云算法是进行数据处理中所要进行一步重要操作&#xff0c;Sentinal-2数据中已经提供了去云算法&#xff0c;但是Landsat Collection2系列数据中并没有提供去云算法&#xff0c;下面就以Landsat 8 Collection2为例进行介绍。 1 导入库并显示地图 import ee import gee…
阅读更多...
http 503 错误

http 503 错误

503错误是一种HTTP状态码&#xff0c;表示你请求的网站或服务暂时不可用&#xff0c;通常是因为服务器过载或维护&#xff0c;你可能会看到类似这样的提示&#xff1a;503 Service Unavailable、503 Service Temporarily Unavailable、HTTP Server Error 503、HTTP Error 503 I…
阅读更多...
Linux_CentOS_7.9配置时区及NTPdate同步之简易记录

Linux_CentOS_7.9配置时区及NTPdate同步之简易记录

前言&#xff1a;ntpdate命令来自英文词组”NTPdate“的拼写&#xff0c;其功能是用于设置日期和时间。ntpdate命令能够基于NTP协议设置Linux系统的本地日期和时间&#xff0c;利用NTP服务的时钟过滤器来选择最优方案&#xff0c;大大提高了可靠性和精度&#xff0c;让系统时间…
阅读更多...
Django 快速整合 Swagger：实用步骤和最佳实践

Django 快速整合 Swagger：实用步骤和最佳实践

Django &#xff0c;作为 Python 编写的一个优秀的开源 Web 应用框架&#xff0c;特别适用于快速开发的团队。对于很多场景来说&#xff0c;我们需要一份 API 文档&#xff0c;好处实在太多了&#xff1a; 提高开发效率&#xff1a;开发者可以基于 API 文档 快速学习和尝试 AP…
阅读更多...
网络安全与IP地址：构建数字世界的前沿堡垒

网络安全与IP地址：构建数字世界的前沿堡垒

网络安全是当今数字社会中不可忽视的挑战之一。而IP地址&#xff0c;作为互联网通信的基础协议&#xff0c;既是数字化时代的桥梁&#xff0c;也是网络安全的关键节点。本文将剖析IP地址在网络安全领域的作用&#xff0c;以及如何利用其特性建立有效的网络安全策略。 IP地址&a…
阅读更多...
【Nodejs】基于node http模块的博客demo代码实现

【Nodejs】基于node http模块的博客demo代码实现

目录 package.json www.js db.js app.js routes/blog.js controllers/blog.js mysql.js responseModel.js 无开发&#xff0c;不安全。 这个demo项目实现了用Promise异步处理http的GET和POST请求&#xff0c;通过mysql的api实现了博客增删改查功能&#xff0c;但因没有…
阅读更多...
YOLOv8改进 | 2023检测头篇 | 利用AFPN增加小目标检测层(让小目标无所遁形)

YOLOv8改进 | 2023检测头篇 | 利用AFPN增加小目标检测层(让小目标无所遁形)

一、本文介绍 本文给大家带来的改进机制是利用今年新推出的AFPN（渐近特征金字塔网络）来优化检测头，AFPN的核心思想是通过引入一种渐近的特征融合策略，将底层、高层和顶层的特征逐渐整合到目标检测过程中。这种渐近融合方式有助于减小不同层次特征之间的语义差距，提高特征…
阅读更多...
花了一小时，拿python手搓了一个考研背单词软件

花了一小时，拿python手搓了一个考研背单词软件

听说没有好用的电脑端背单词软件&#xff1f;只好麻烦一下&#xff0c;花了一小时&#xff0c;拿python手搓了一个考研背单词软件。 代码已经开源在我的github上&#xff0c;欢迎大家STAR&#xff01; 其中&#xff0c;数据是存放在sqlite中&#xff0c;形近词跳转是根据jaro …
阅读更多...
【ZYNQ实验】第一篇、ZYNQ驱动HDMI显示图片

【ZYNQ实验】第一篇、ZYNQ驱动HDMI显示图片

目录 第一部分、实验说明 1、点名过来看 2、实验说明 2.1、涉及到的知识 2.2、使用的硬件 3、测试效果 3.1、实验一效果 3.2、实验二效果 4、写在前面 5、参考文献 第二部分、硬件搭建 第三部分、实现方法 1、实验一 1.1、实验一原理图 1.2、MATLAB图片转换代码…
阅读更多...
了解一下InternLM1

了解一下InternLM1

InternLM 是在过万亿 token 数据上训练的多语千亿参数基座模型。通过多阶段的渐进式训练&#xff0c;InternLM 基座模型具有较高的知识水平&#xff0c;在中英文阅读理解、推理任务等需要较强思维能力的场景下性能优秀&#xff0c;在多种面向人类设计的综合性考试中表现突出。在…
阅读更多...
flutter项目用vscode打包apk包，完美运行到手机上

flutter项目用vscode打包apk包，完美运行到手机上

1.创建密钥库 执行以下命令: keytool -genkey -v -keystore F:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 10,000 天) 2.填写密钥内容 执行以上命令后会提示一次输入密钥库密码、确认…
阅读更多...
JVS规则引擎和智能BI（自助式数据分析）1.3新增功能说明

JVS规则引擎和智能BI（自助式数据分析）1.3新增功能说明

规则引擎更新功能 新增: 1、数据源新增Excel数据源&#xff1b; Excel数据源功能允许用户将Excel文件作为数据源导入&#xff0c;并进行数据清洗、转换和处理&#xff0c;以实现数据的集成、可视化和深度分析&#xff0c;为决策提供强大支持&#xff0c;同时保持良好的交互性…
阅读更多...
TTPLA：一种用于输电杆塔和输电线路检测与分割的航空影像数据集

TTPLA：一种用于输电杆塔和输电线路检测与分割的航空影像数据集

从航空图像中准确检测和分割输电塔&#xff08;TTs&#xff09;和电力线&#xff08;PLs&#xff09;对于保护电网安全和低空无人机安全起着关键作用。同时&#xff0c;TTs和PLs的航空图像对从事对象检测和分割工作的计算机视觉研究人员提出了许多新挑战——电力线长而细&#…
阅读更多...
USB 转 TTL线直接读取DS18B20

USB 转 TTL线直接读取DS18B20

简介 使用USB转TTL线直接读取DS18B20 温度。 电路图 绘制图 实物图 软件 Download 1-Wire/iButton Drivers for Windows 操作 所有的线路连接好之后将 USB 转 TTL线接到PC上; 安装软件 Download 1-Wire/iButton Drivers for Windows 并打开 软件打开之后先选择串口后 …
阅读更多...
VitePress搭建Vite官方中文文档首页

VitePress搭建Vite官方中文文档首页

✨专栏介绍 在当今数字化时代&#xff0c;Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序&#xff0c;就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术&#xff0c;以及各种框架、库和工具…
阅读更多...
记一次使用mpvue开发微信小程序动画播放播放完成再播放下一个动画，实现动画队列的实战操作

记一次使用mpvue开发微信小程序动画播放播放完成再播放下一个动画，实现动画队列的实战操作

微信小程序wxss支持Css的keyframes动画&#xff0c;我们想通过事件监听&#xff0c;在动画开始、动画播放阶段、动画播放结束的时候进行下一步动作。如下图&#xff0c;有一个从右飘入&#xff0c;然后从左侧出去的动画&#xff0c;我们希望的是&#xff0c;前一个出去后&#…
阅读更多...
pytorch07：损失函数与优化器

pytorch07：损失函数与优化器

目录 一、损失函数是什么二、常见的损失函数2.1 nn.CrossEntropyLoss交叉熵损失函数2.1.1 交叉熵的概念2.2.2 交叉熵代码实现2.2.3 加权重损失 2.2 nn.NLLLoss2.2.1 代码实现 2.3 nn.BCELoss2.3.1 代码实现 2.4 nn.BCEWithLogitsLoss2.4.1 代码实现 三、优化器Optimizer3.1 什么…
阅读更多...
GPT/GPT4科研应用与AI绘图技术及论文高效写作（建议收藏）

GPT/GPT4科研应用与AI绘图技术及论文高效写作（建议收藏）

详情点击链接&#xff1a;GPT/GPT4科研实践应用与AI绘图技术及论文高效写作 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析&#xff0c;AI画图&#xff0c;图像识别&#xff0c;文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Clau…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023