uniapp树组件优化 树节点设置单选，单击单选框可以选中多个 偶尔根节点点击后会隐藏整棵树

已于 2023-01-04 09:20:24 修改
阅读量785 收藏 1
点赞数 2
分类专栏： uniapp树组件 uniapp app uniapp 文章标签： uni-app
于 2022-11-29 16:49:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45631278/article/details/128100293
版权

在上篇文章的组件基础上做了两个调整
1.处理偶尔根节点点击后会隐藏整棵树的情况，lastRank是判断是否是最后一级，但是如果是根节点的话是不会有lastRank

在这里插入图片描述
2.处理树节点设置multiple是单选的时候单击单选框可以选中多个的情况
是由于syncChecked方法报错导致没有往下走了，所以处理一下空数组的情况
（uniapp多处理一点报错吧，求求了）
在这里插入图片描述
在这里插入图片描述

<template xlang="wxml">
	<view class="tki-tree">
		<view class="tki-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
		<view class="tki-tree-cnt" :class="{'show':showTree}">
			<view class="tki-tree-bar">
				<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消</view>
				<view class="tki-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
				<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">确定</view>
			</view>
			<view class="tki-tree-view">
				<scroll-view class="tki-tree-view-sc" :scroll-y="true">
					<block v-for="(item, index) in treeList" :key="index">
						<view class="tki-tree-item" :style="[{
							paddingLeft: item.rank*15 + 'px',
							zIndex: item.rank*-1 +50
						}]"
						 :class="{
							border: border === true,
							show: item.show,
							last: item.lastRank,
							showchild: item.showChild,
							open: item.open,
							'tki-tree-label-checked': item.checked
						}">
							<view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
								<image class="tki-tree-icon" :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image>
								<text>{{item.name}}</text>
							</view>
							<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)" v-if="(selectParent?true:item.lastRank) && !item.disabled">
								<view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}" :style="{'border-color':confirmColor}">
									<view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}"></view>
								</view>
								<view class="tki-tree-check-no" v-else :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"></view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tki-tree",
		props: {
			// 懒加载，可以分节查询树的数据
			lazy: {
				type: Boolean,
				default: false
			},
			// 生成树的数据
			range: {
				type: Array,
				default: function() {
					return []
				}
			},
			idKey: {
				type: String,
				default: 'id'
			},
			rangeKey: {
				type: String,
				default: 'label'
			},
			// 树的标题
			title: {
				type: String,
				default: ''
			},
			// 是否可以多选
			multiple: {
				type: Boolean,
				default: false
				// default: true
			},
			// 是否可以选父级
			selectParent: {
				type: Boolean,
				default: false
			},
			// 折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
			foldAll: {
				type: Boolean,
				default: false
			},
			// 确定按钮颜色
			confirmColor: {
				type: String,
				default: '' // #07bb07
			},
			// 取消按钮颜色
			cancelColor: {
				type: String,
				default: '' // #757575
			},
			// 标题颜色
			titleColor: {
				type: String,
				default: '' // #757575
			},
			// 展开时候的icon
			currentIcon: {
				type: String,
				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg=='
			},
			// 折叠时候的icon
			defaultIcon: {
				type: String,
				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
			},
			// 没有子集的icon
			lastIcon: {
				type: String,
				default: ''
			},
			// 是否有分割线
			border: {
				type: Boolean,
				default: false
			},
			// 是否展开所有节点
			showAllFlod: {
				type: Boolean,
				default: false
			},
			// 控制要展开到第几层
			openRank: {
				type: [Number, String],
			}
		},
		data() {
			return {
				showTree: false,
				treeList: [],
				selectIndex: -1,
				returnedItem: [] ,//定义一个空数组
				pids: [],
				ancestorsIds: [],
				childNums: [],
			}
		},
		computed: {},
		methods: {
			_show() {
				this.showTree = true
			},
			_hide() {
				this.showTree = false
			},
			_cancel() {
				this._hide()
				this.$emit("cancel", '');
			},
			_confirm() {
				// 处理所选数据
				let rt = [],
					obj = {};
				this.treeList.forEach((v, i) => {
					if (this.treeList[i].checked) {
						rt.push(this.treeList[i].id)
						obj = this.treeList[i]
					}
				})
				this._hide()
				this.$emit("confirm", rt, obj);
			},
			//扁平化树结构
			_renderTreeList(list = [], rank = 0, parentId = [], parents = [], parentData = {}) {
				let openRank = this.openRank ? (rank < this.openRank) : false;
				let showRank = this.openRank ? (rank < this.openRank - 1) : false;
				if (this.showAllFlod) {
					openRank = showRank = true;
				}
				list.forEach(item => {
					this.treeList.push({
						...item,
						id: item[this.idKey],
						name: item[this.rangeKey],
						source: item,
						disabled: item.disabled,
						parentId, // 父级id数组
						parents, // 父级id数组
						parentData, // 父级数据
						rank, // 层级
						showChild: Boolean(showRank), //箭头怎么展示
						open: Boolean(showRank), //是否打开
						show: Boolean(openRank || rank === 0), // 自身是否显示
						hideArr: [],
						orChecked: item.checked ? item.checked : false,
						checked: item.checked ? item.checked : false,
						childNum: 0
					})
					
					if (Array.isArray(item.children) && item.children.length > 0) {
						let parentid = [...parentId],
							parentArr = [...parents];
						delete parentArr.children
						parentid.push(item[this.idKey]);
						parentArr.push({
							[this.idKey]: item[this.idKey],
							[this.rangeKey]: item[this.rangeKey]
						})
						// lazy
						if(!this.lazy) {
							this._renderTreeList(item.children, rank + 1, parentid, parentArr, item);
						}
					} else {
						this.treeList[this.treeList.length - 1].lastRank = true;
					}
				})
			},
			// 处理默认选择
			_defaultSelect() {
				this.treeList.forEach((v, i) => {
					if (v.checked) {
						this.treeList.forEach((v2, i2) => {
							if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
								v2.show = true
								if (v.parentId.includes(v2.id)) {
									v2.showChild = true;
									v2.open = true;
								}
							}
						})
					}
				})
			},
			getOwn(id, arr){
			  //利用foreach循环遍历
			  arr.forEach((item) => {
				//判断递归结束条件
				if(item[this.idKey] == id)
				{       
				  // 存储数据到空数组
				  this.returnedItem = item
				}
				  else if(item.children != null) //判断chlidren是否有数据
				{
				  //递归调用
				  this.getOwn(id, item.children);                 
				}                   
			  })
			  return this.returnedItem
			},
			setShow (id, arr, isShow) {
				arr.forEach((item, index) => {
					if(item.parentId.includes(id)) {
						this.treeList[index].showChild = isShow
						this.treeList[index].show = isShow
					} else if (item.children !== undefined) {
						this.setShow(id, item.children, isShow)
					}
				})
			},
			// 点击
			_treeItemTap(item, index) {
				if (item.lastRank === true) {
					//点击最后一级时触发事件
					this.treeList[index].checked = !this.treeList[index].checked
					this.$emit('selectTree', this.treeList.filter(item => item.checked));
					this._fixMultiple(index)
					return;
				}
				let list = this.treeList;
				let id = item.id;
				item.showChild = !item.showChild;
				item.open = item.showChild ? true : !item.open;
				list.forEach((childItem, i) => {
					if (item.showChild === false) {
						//隐藏所有子级
						if (!childItem.parentId.includes(id)) {
							return;
						}
						if (!this.foldAll) {
							if (childItem.lastRank !== true && !childItem.open) {
								childItem.showChild = false;
							}
							// 为隐藏的内容添加一个标记
							if (childItem.show) {
								childItem.hideArr[item.rank] = id
							}
						} else {
							if (childItem.lastRank !== true) {
								childItem.showChild = false;
							}
						}
						childItem.show = false;
					} else {
						// 打开子集
						if (childItem.parentId[childItem.parentId.length - 1] === id) {
							childItem.show = true;
						}
						// 打开被隐藏的子集
						if (childItem.parentId.includes(id) && !this.foldAll) {
							if (childItem.hideArr[item.rank] === id) {
								childItem.show = true;
								if (childItem.open && childItem.showChild) {
									childItem.showChild = true
								} else {
									childItem.showChild = false
								}
								childItem.hideArr[item.rank] = null
							}
						}
					}
				})
			},
			// 通过父id处理子级
			syncChecked (trees, pid, checked) {
				trees.forEach((item,index) => {
					if(item.parentId?.includes(pid)) {
						this.treeList[index].checked = checked
						this.syncChecked(trees, item.id, checked)
					} else if(item.children !== undefined) {
						this.syncChecked(item.children, pid, checked)
					}
				})
			},
			// 获取父级往上所有层级的id 并同步状态
			setAncestors (pids, checked) {
				this.treeList.forEach((item,index) => {
					if(pids.includes(item.id)) {
						if(checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) {
						// 子级全部选中, 父级才选中
							this.treeList[index].checked = true
						} else {
							this.treeList[index].checked = false
						}
						this.setAncestors(item.parentId, checked)
					} 
				})
			},
			_treeItemSelect(item, index) {
				this.treeList[index].checked = !this.treeList[index].checked
				// 选父级, 子级自动全选
				this.syncChecked(this.treeList, item.id, this.treeList[index].checked)
			
				if(item.rank > 0) {
					item.parentId.forEach((pid, indexP) => {
						const parent = this.treeList.filter(i => i.id === pid)
						const childNum = parent.length > 0 ? parent[0].childNum : 0
						if(this.childNums[pid] === undefined) {
							this.childNums[pid] = 1
						} else if(this.childNums[pid] < childNum) {
							this.childNums[pid]++
						}
					})
					//子级选择/选满/取消选择, 父级往上同步状态
					this.setAncestors(item.parentId, this.treeList[index].checked)
				}
				this._fixMultiple(index)
			},
			// 处理单选多选
			_fixMultiple(index) {
				if (!this.multiple) {
					// 如果是单选
					this.treeList.forEach((v, i) => {
						if (i != index) {
							this.treeList[i].checked = false
						} else {
							this.treeList[i].checked = true
						}
					})
				}
			},
			// 重置数据
			_reTreeList() {
				this.treeList.forEach((v, i) => {
					this.treeList[i].checked = v.orChecked
				})
			},
			_initTree(range = this.range){
				this.treeList = [];
				this._renderTreeList(range);
				this.$nextTick(() => {
					this._defaultSelect(range)
				})
			}
		},
		watch: {
			range: {
				deep: true,
				handler(list) {
					this._initTree(list);
				}
			},
			multiple() {
				if (this.range.length) {
					this._reTreeList();
				}
			},
			selectParent() {
				if (this.range.length) {
					this._reTreeList();
				}
			},
		},
		mounted() {
			this._initTree();
		}
	}
</script>

<style scoped>
	@import "./style.css";
</style>


.tki-tree-mask {
  position: fixed;
  top: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.3s ease;
  visibility: hidden;
}
.tki-tree-mask.show {
  visibility: visible;
  opacity: 1;
}
.tki-tree-cnt {
  position: fixed;
  top: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 9999;
  top: 160rpx;
  transition: all 0.3s ease;
  transform: translateY(100%);
}
.tki-tree-cnt.show {
  transform: translateY(0);
}
.tki-tree-bar {
  background-color: #fff;
  height: 72rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-bottom-width: 1rpx !important;
  border-bottom-style: solid;
  border-bottom-color: #f5f5f5;
  font-size: 32rpx;
  color: #757575;
  line-height: 1;
}
.tki-tree-bar-confirm {
  color: #07bb07;
}
.tki-tree-view {
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  left: 0rpx;
  top: 72rpx;
  background-color: #fff;
  padding-top: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
  padding-left: 20rpx;
}
.tki-tree-view-sc {
  height: 100%;
  overflow: hidden;
}
.tki-tree-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: #757575;
  /* line-height: 1; */
  height: 0;
  opacity: 0;
  transition: 0.2s;
  position: relative;
  overflow: hidden;
}
.tki-tree-item.show {
  min-height: 40px;
  height: auto;
  opacity: 1;
}
.tki-tree-item.showchild:before {
  transform: rotate(90deg);
}
.tki-tree-item.last:before {
  opacity: 0;
}
.tki-tree-icon {
  width: 26rpx;
  height: 26rpx;
  margin-right: 8rpx;
}
.tki-tree-label {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 8rpx;
  margin: 4rpx 0;
}
.tki-tree-label-checked {
  background: #026EB7;
  border-radius: 8rpx;
  margin: 4rpx 0;
  color: #fff;
}
.tki-tree-check {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tki-tree-check-yes,
.tki-tree-check-no {
  width: 20px;
  height: 20px;
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
  border-bottom-left-radius: 20%;
  border-top-width: 1rpx;
  border-left-width: 1rpx;
  border-bottom-width: 1rpx;
  border-right-width: 1rpx;
  border-style: solid;
  border-color: #07bb07;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.tki-tree-check-yes-b {
  width: 12px;
  height: 12px;
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
  border-bottom-left-radius: 20%;
  background-color: #07bb07;
}
.tki-tree-check .radio {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.tki-tree-check .radio .tki-tree-check-yes-b {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.hover-c {
  opacity: 0.6;
}
人间清醒小仙女
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uni-app - 详细实现树形结构选择器组件（支持单选 / 多选 / 可选择父级 / 弹框形式）树形控件 tree 无限级节点树，树插件完整源码，最好用的组件教程
王佳斌
11-07 1万+
uni-app 实现无限级树形结构组件，uniapp无限树形结构，uniapp无限级树形结构组件,多选组件,支持搜索，关于vue.js:uniapp如何实现无限级树形结构组件，uniapp无限级树形结构组件，多选组件，无限树状组件的实现，uni-app官方插件，最好用的树形结构three组件树，很好用的uni-app节点树组件教程，uni-app兼容H5 app 小程序的树形节点树插件组件，UNIAPP怎么实现树形解构可展开折叠的组件。uni-app - 树形结构组件（支持展示、单选、多选、多选联动、展开折
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
lanbaiyans的博客
04-10 4348
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
很好用的uni-app节点树组件！
06-23
很好用的uni-app节点树组件！
Uniapp树选择组件
最新发布
fsfsddsfsfwe的博客
05-31 280
【代码】Uniapp树选择组件。
uni-app tree(树状) 组件
qq_42717015的博客
09-13 6436
uni-app tree(树状) 组件
uniapp实现tree
baidu_37302589的博客
02-18 5189
uniapp使用tree 引入插件 编写自定义组件 <template> <view> <tki-tree ref="tkitree" title="选择门店" :range="range" rangeKey="title" idKey="key" :selectParent="true" :foldAll="true" confirmColor="#4e8af7" @confirm="treeConfirm" @cancel="treeCancel" />
uniapp的树形选择器，tki-tree组件
热门推荐
Blue54的博客
03-21 1万+
根据：树形选择器增强版，支持多选、单选、父级选择，Picker形式 - DCloud 插件市场 树形选择器：使用tki-tree组件： 先导入并注册组件： 在javascript中：export default外放import，在export default内data外放注册components import tkiTree from "@/commons/tki-tree/tki-tree.vue" components: { tkiTree, }, 在template中写：
Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件
10-29
在这个特定的情况下，我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree，它在ExtJS4中实现了单选和多选功能，并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性，...
layui+ztree下拉树，支持单选和多选
09-11
`layui`和`ztree`这两个工具结合，可以实现一个功能强大的下拉树组件，支持单选和多选，大大提升了用户体验。本文将详细介绍如何利用`layui`和`ztree`来构建这样的组件，并探讨其关键技术和应用场景。 `layui`是一...
jsp+js带单选复选框的动态树
11-29
在这个应用场景中，用户可以进行选择操作，通过单选框或复选框来标记或筛选树中的节点。 **JSP（Java Server Pages）** 是一种服务器端的脚本语言，用于生成动态Web内容。在JSP中，HTML、CSS和JavaScript代码与Java...
多列列表框单选和多选Demo,表格怎么选择多选和单选,LabView
09-10
6. **交互性增强**：可以添加单选框或多选框控件来切换列表框的单选或多选模式。当用户更改这些控件的状态时，更新列表框的“多选”属性。 在实际应用中，你可能还会遇到一些高级功能，如搜索过滤、排序、自定义...
TreeListWPF_树列表控件_
10-02
在WPF中，TreeListWPF控件允许开发者创建多列的树形结构，每行可以有多个单元格，每个单元格可以显示不同的属性值。这样的设计使得用户可以同时看到数据的不同方面，增加了数据的可读性和交互性。例如，一个典型的...
uni-app树形列表（单选，多选）
liuye066的专栏
11-24 6172
多选： 使用的是插件市场的tree树组件（ly-tree) <ly-tree ref="tree" :treeData="treeData" v-if="ready" nodeKey="id" @node-expand="handleNodeExpand" @node-click="handleNodeClick" :showCheckbox="true" :checkOnClickNode="true" :expandOnClickNode="false" :defaultExpa
前端uni-app树形组件 tree组件，可拖拽移动，点击展开收缩，无限添加子集
chenchuang0128的博客
05-26 2584
下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?// 颜色设定 不同颜色寓意不同权重。"name": "其他规模企业","name": "生物与新医药","name": "其他规模企业","name": "新能源汽车","name": "大型企业","name": "中型企业","name": "小型企业","name": "大型企业","name": "中型企业","name": "小型企业","name": "行业分类",
uniapp 树形层级选择器插件 ba-tree-picker
三杯五岳
06-30 7125
uniapp树形层级选择器插件，使用的picker弹窗形式的，样式和比例参照uniapp的picker和uni-data-picker组件 * 支持单选、多选、父级选择 * 支持Object对象属性自定义映射 * 支持显示全部选中、部分选中、未选中三种状态 * 支持快速自定义简单样式（分割线、按钮、标题等），深入样式可复写css.........
uni-app-使用tkiTree组件实现树形结构选择(​自定义组件 components/tki-tree/tki-tree 建议移动到子包 subpkg 内)
路虽远行则将至，事虽难做则必成。
08-04 3018
在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况往往需要把这个树结构当成条件来查询数据，在PC端可以使用Tree，table，Treeselect等组件展示在uni-app的内置组件中似乎没有提供这样组件来展示，但是是有第三方包tkiTree组件来解决这个问题我是基本使用，通过确认之后传递id和name形式来使用，据说深层次使用会有很多bug（需要自己尝试）
uniapp无限级树组件，支持纯展示、单选、多选、多选联动等模式
weixin_41308436的博客
11-03 1671
1.支持纯展示2.支持单选（所有可选、只选子级俩种模式）3.多选（所有可选、只选子级俩种模式）4.多选联动。
uniapp 树形结构选择器
weixin_53561783的博客
02-01 4040
改造，可以实现多选或者单选，我上面示例为单选，上面的tab导航头是可以点击回退的，这个插件的优势在于，正常的树形结构的数据非常多，移动端拉取数据太多或导致页面卡顿，我用了好几款插件体验度都不是很友好，这款插件它是一个新的路由页面不同一般的弹窗页面类似，能很好的避免页面卡顿，第一次加载过长的问题，因为我是一个单独的页面，防止遗漏我会把我的全部页面功能全部贴出来，有的和组件无关的，需要自己手动删除一下。查看项目目录uni_modules 下面是否有相对于的导入的包文件。前往插件市场导入完整插件包代码。
前端vue生成二维码
DcynotFound的博客
01-04 1009
作为子组件 tki-qrcode.vue <template xlang="wxml" minapp="mpvue"> <view class="_qrCode" :style="{width:'100%',height:'100%'}"> <canvas class="_qrCodeCanvas" id="_myQrCodeCanvas" canvas-id=...
element 树组件怎么在点击树之外的地方，不让原来树被点击节点失去焦点并保留点击后的颜色
05-27
可以通过监听 document 的 click 事件，判断点击的区域是否在树组件内部，如果不在则取消选中节点的焦点并保留点击后的颜色。具体实现可以参考以下代码： ```javascript mounted() { // 监听 document 的 click 事件 document.addEventListener('click', this.handleDocumentClick) }, methods: { handleDocumentClick(event) { const treeContainer = this.$refs.tree.$el // 获取树组件的容器元素 if (!treeContainer.contains(event.target)) { // 判断点击的区域是否在树组件内部 this.$refs.tree.setCurrentKey(null) // 取消选中节点的焦点 } } } ``` 其中，`$refs.tree` 获取到的是树组件的实例，`setCurrentKey(null)` 取消选中节点的焦点。通过这段代码，就可以实现点击树之外的地方，不让原来树被点击节点失去焦点并保留点击后的颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人间清醒小仙女

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值