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

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

掘金

掘金

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vue-mixins混入处理

vue-mixins混入处理

定义 mixins&#xff08;混入&#xff09;&#xff1a;一种分发 Vue 组件中可复用功能的非常灵活的方式&#xff0c;mixins 是一个 js 对象&#xff0c;它可以包含我们组件script中的任意功能选项&#xff0c;如&#xff1a;data、components、methods、created、computed 等等…
阅读更多...
202365读书笔记|《温暖和百感交集的旅程》——时间帮助着一个人的一生在几千字的篇幅里栩栩如生

202365读书笔记|《温暖和百感交集的旅程》——时间帮助着一个人的一生在几千字的篇幅里栩栩如生

202365读书笔记|《温暖和百感交集的旅程》——时间帮助着一个人的一生在几千字的篇幅里栩栩如生 我能否相信自己温暖和百感交集的旅程前言和后记 《温暖和百感交集的旅程》作者余华&#xff0c;之前读完的一本书&#xff0c;已经不太记得内容了&#xff0c;看着笔记整理的这篇书…
阅读更多...
Java项目：109SpringBoot超市仓管系统

Java项目：109SpringBoot超市仓管系统

博主主页&#xff1a;Java旅途 简介&#xff1a;分享计算机知识、学习路线、系统源码及教程 文末获取源码 一、项目介绍 超市仓管系统基于SpringBootMybatis开发&#xff0c;系统使用shiro框架做权限安全控制&#xff0c;超级管理员登录系统后可根据自己的实际需求配角色&…
阅读更多...
Tectum：BTC L2终极解决方案+最快区块链，表现强势开启质押

Tectum：BTC L2终极解决方案+最快区块链，表现强势开启质押

随着加密市场的不断成长&#xff0c;不管是金融属性还是使用体验都有了质的提升&#xff01;牛市即将到来&#xff0c;多个机构的比特币 ETF 正在申请中&#xff0c;无论什么时候获得 SEC 的批准&#xff0c;都将为加密市场带来万亿级别的资金&#xff0c;同时吸引更多的 Web2 …
阅读更多...
大数据 MapReduce是什么？

大数据 MapReduce是什么？

在Hadoop问世之前&#xff0c;其实已经有了分布式计算&#xff0c;只是那个时候的分布式计算都是专用的系统&#xff0c;只能专门处理某一类计算&#xff0c;比如进行大规模数据的排序。 很显然&#xff0c;这样的系统无法复用到其他的大数据计算场景&#xff0c;每一种应用都…
阅读更多...
会声会影2023如何实现自定义尺寸MP4格式视频制作 会声会影视频制作过程 会声会影免费吗

会声会影2023如何实现自定义尺寸MP4格式视频制作 会声会影视频制作过程 会声会影免费吗

在使用会声会影生成视频时&#xff0c;默认提供了很多不同的尺寸参数&#xff0c;但有些时候&#xff0c;我们需要自定义生成的尺寸&#xff0c;同时保证生成文件的格式为mp4.视频的体积不能过大&#xff0c;这时候我们要如何做呢&#xff1f;今天来介绍2个方法&#xff0c;供大…
阅读更多...
72.乐理基础-打拍子-加延音线的节奏型

72.乐理基础-打拍子-加延音线的节奏型

什么是延音线看这里&#xff1a;乐理基础-音符的组合方式-延音线 上一个内容&#xff1a;71.乐理基础-打拍子-三连音的变体-CSDN博客 为了让二八、四十六、前八后十六、前十六后八、前附点、后附点、小切分、大附点、大切分、三连音这是个基础节奏型产生更丰富的节奏形态&…
阅读更多...
分享10篇优秀论文，涉及图神经网络、大模型优化、表格分析

分享10篇优秀论文，涉及图神经网络、大模型优化、表格分析

引言 第38届AAAI人工智能年度会议将于2024年2月在加拿大温哥华举行。今天给大家分享十篇AAAI2024论文&#xff0c;主要涉及图神经网络&#xff0c;大模型幻觉、中文书法文字生成、表格数据分析、KGs错误检测、多模态Prompt、思维图生成等。 论文获取方式&#xff0c;回复&am…
阅读更多...
【Linux驱动】Linux中断（二）—— 按键中断驱动

【Linux驱动】Linux中断（二）—— 按键中断驱动

前一篇已经在设备树的 gpio-led 节点中引入了中断信息&#xff0c;接下来将通过API来获取设备树中的中断信息。gpio-led 节点具体内容如下&#xff1a; gpio-key0 {pinctrl-names "default";pinctrl-0 <&pinctrl_gpio_keys>; // pinctrl子系…
阅读更多...
计算化学顶刊封面！玻色量子联合上海交大张健课题组发表量子计算重要成果

计算化学顶刊封面！玻色量子联合上海交大张健课题组发表量子计算重要成果

​2023年12月13日&#xff0c;北京玻色量子科技有限公司&#xff08;以下简称“玻色量子”&#xff09;联合上海交通大学在中科院分区1区、计算化学领域Top刊物JCTC&#xff08;Journal of Chemical Theory and Computation&#xff09;内刊的封面上发表了以“Encoding Molecul…
阅读更多...
【Spring】AOP原来如此

【Spring】AOP原来如此

AOP概述 什么是AOP的技术&#xff1f; 在软件业&#xff0c;AOP为Aspect Oriented Programming的缩写&#xff0c;意为&#xff1a;面向切面编程AOP是一种编程范式&#xff0c;隶属于软工范畴&#xff0c;指导开发者如何组织程序结构AOP最早由AOP联盟的组织提出的,制定了一套…
阅读更多...
vercel部署Gemini pro

vercel部署Gemini pro

一、注册一个vercel账号&#xff08;这个东西类似于第三方的github pages&#xff0c;能部署github中的项目&#xff09; 二、注册结束后&#xff0c;填写github的账号&#xff08;需要事先在该github账号中fork一个gemini的repository&#xff09; 三、babaohuang/GeminiPro…
阅读更多...
Koordinator 助力云原生应用性能提升：小红书混部技术实践

Koordinator 助力云原生应用性能提升：小红书混部技术实践

作者&#xff1a;宋泽辉&#xff08;小红书&#xff09;、张佐玮&#xff08;阿里云&#xff09; 编者按&#xff1a; Koordinator 是一个开源项目&#xff0c;是基于阿里巴巴内部多年容器调度、混部实践经验孵化诞生&#xff0c;是行业首个生产可用、面向大规模场景的开源混…
阅读更多...
layuiadmin新建tabs标签页，点击保存，打开新的标签页并刷新

layuiadmin新建tabs标签页，点击保存，打开新的标签页并刷新

用的layuiamin前端框架 需求&#xff1a;新增的页面为一个标签页&#xff0c;保存后&#xff0c;需要刷新列表 1、新建customMethod.js文件&#xff0c;自定义自己的方法 layui.define(function (exports) {var $ layui.$var customMethod {// 表单点击保存后&#xff0c;…
阅读更多...
解决docker容器内无法连接宿主redis

解决docker容器内无法连接宿主redis

背景 小程序的发短信服务挂了&#xff0c;随查看日志&#xff0c;该报错日志如下 Error 111 connecting to 127.0.0.1:6379. Connection refused. 6379是监听redis服务的端口&#xff0c;那大概是redis出错了。 首先查看了redis是否正常启动&#xff0c;检查出服务正常。 由于小…
阅读更多...
Docker-Compose部署Redis(v7.2)主从模式

Docker-Compose部署Redis(v7.2)主从模式

文章目录 一、前提准备1. redis配置文件2. 下载redis镜像3. 文件夹结构 二、docker-compose三、主从配置1.主节点配置文件 环境 docker desktop for windows 4.23.0redis 7.2 一、前提准备 1. redis配置文件 因为Redis 7.2 docker镜像里面没有配置文件&#xff0c;所以需要…
阅读更多...
推荐Linux和Ubuntu系统中特别有用的几个指令

推荐Linux和Ubuntu系统中特别有用的几个指令

常用推荐指令 1.在Ubuntu中好多文件或文件夹是不能使用右键删除的&#xff0c;因此知道删除文件或文件夹的rm命令显得尤为重要。 &#xff08;1&#xff09;删除文件夹的内容包括文件夹: # 以最高权限删除 sudo rm -rf 文件夹的名字 #&#xff08;-r 是循环的意思&…
阅读更多...
Fast R-CNN

Fast R-CNN

Fast R-CNN算法流程 对比与R-CNN其在第二步时并没有将所有的候选区域进行逐个的CNN特征提取&#xff0c;而是直接将整个图片进行一次CNN特征提取&#xff0c;让后再将候选区映射到feature map上。可想而知速度得到了提升。这里的ROI pooling层缩放到7x7就是将候选区域对应的特征…
阅读更多...
MySQL Enterprise版本各系统安装包下载

MySQL Enterprise版本各系统安装包下载

一、官方下载地址 oracle下载地址 https://edelivery.oracle.com/osdc/faces/SoftwareDelivery 使用oracle账号登录进去 Category选择Download Package(下载安装包)&#xff0c;搜索栏输入mysql Enterprise关键字点search进行搜索。选项结果第一个MySQL Enterprise Edition&a…
阅读更多...
buuctf-Misc 题目解答分解106-108

buuctf-Misc 题目解答分解106-108

106.[DDCTF2018]流量分析 提示了私钥 &#xff0c;无厘头&#xff0c;先不管了&#xff0c;应该是流量加密了&#xff0c;用wireshark 打开 看看&#xff0c;真个数据流量&#xff0c;没有http 直接找到TCP 协议的包追踪一下TCP 找到TCP 不是红色的包追踪&#xff0c;大量的数…
阅读更多...
最新文章

Copyright @ 2022~2023