uni-app树形列表(单选,多选)tree树组件(利用市场插件),记录使用方法

文章展示了如何在Vue.js应用中使用DCloud的tree组件,包括单选和多选模式,通过数据绑定和事件处理获取选中节点的id值,以及自定义节点键名。示例代码详细说明了组件的配置和方法调用。
摘要由CSDN通过智能技术生成

 参考 :tree树组件(QQ群:旧群没了,新群:801142650) - DCloud 插件市场

 下载插件↓

单选↓

  可以通过selectCondition来取出id值

<template>
	<view v-if="isShowConfirm" class="my-confirm-notice">
		<view class="confirm-content-wrap1">
			<!-- 内容 -->
			{{selectCondition}}
			<view class="content_margin">
				<view class="flex_row_center label_text">组织机构:
					<input type="text" disabled="true" class="inputStyle" ref='groupInput' @click="popOrganization"
						placeholder="请选择组织机构" :value='groupName'>
				</view>
				<view v-show="isShow" class="top_level">
					<view class="flex_row_center label_text">
						<view style="width: 140rpx;"></view>
						<scroll-view style="height: 200px;" class="ly_tree_style" :scroll-y="true">
							<ly-tree ref="tree" :treeData="treeData" v-if="ready" :showRadio="true" nodeKey="ids"
								:checkOnClickNode="true" :expandOnClickNode="false" :defaultExpandAll="true"
								@check='handleCheck'  :props="props"></ly-tree>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				props: {
					label: 'labels' // 指把数据中的‘categoryName’当做label也就是节点名称
				},
				selectCondition:{},   //存放对应的id值
				isShowConfirm: true,
				treeData: [],
				ready: false,
				isShow: false,
				defalutValue: '请选择组织机构',
				groups: [],
				groupName: ''
			}
		},
		created() {
			console.log('created')
		},
		mounted() {
			console.log('mounted')
			this.loadData()
		},
		methods: {
			// this.$refs.tree.setCheckAll(false);
			popOrganization() {
				this.isShow = !this.isShow;
			},
			loadData() {
				setTimeout(() => {
					this.treeData = [{
							ids: 1,
							labels: '客流分析与管理1',
							children: [{
									ids: 11,
									labels: 'IT部'
								},
								{
									ids: 12,
									labels: '运维部'
								},
								{
									ids: 13,
									labels: '营销部'
								},
								{
									ids: 14,
									labels: '实施部'
								},
								{
									ids: 15,
									labels: '售后部'
								},
							]
						},
						{
							ids: 2,
							labels: '一级2',
							children: [{
									ids: 21,
									labels: '二级21'
								},
								{
									ids: 22,
									labels: '二级22'
								},
							]
						},
						{
							ids: 3,
							labels: '一级3',
							children: [{
									ids: 31,
									labels: '二级31'
								},
								{
									ids: 32,
									labels: '二级32'
								},
								{
									ids: 33,
									labels: '二级33'
								},
								{
									ids: 34,
									labels: '二级34'
								},
								{
									ids: 35,
									labels: '售后部'
								},
							]
						},
					];
					this.ready = true;
				}, 2000);
			},

			handleCheck(obj) {
				console.log('handleCheck=' + JSON.stringify(obj))
				this.getSelectData(obj.node);
			},

			getSelectData(obj) {
				let groupParam = '';
				let groupNames = '';
				if (obj.checked) {
					groupParam = obj.data.ids;
					groupNames = obj.data.labels;
				} else {
					groupParam = '';
					groupNames = '';
				}
				this.groupName = groupNames;
				this.selectCondition = {
					'deptId': groupParam
				};
				console.log('selectCondition=' + groupParam)
			},

		}
	}
</script>

<style lang="scss">
	.my-confirm-notice {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
		/* 这里防止当用户长按屏幕,出现的黑色背景色块,以及 iPhone 横平时字体的缩放问题 */
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
	}

	.confirm-content-wrap1 {
		position: relative;
		left: 0;
		right: 0;
		// width: 60%;
		width: 90%;
		height: 247px;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		z-index: 999;
		user-select: none;
	}

	.content_margin {
		padding: 15px 0px 15px 0px;
	}

	.flex_row_center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.label_text {
		font-size: 28rpx;
		color: #555555;
	}

	.inputStyle {
		border: #bababa 0.5px solid;
		width: 169px;
		height: 34px;
		box-sizing: border-box;
		font-size: 13px;
		padding: 3px 2px;
	}

	.top_level {
		position: fixed;
		z-index: 100;
		width: 90%;
	}

	.ly_tree_style {
		border: #F5F5F5 1px solid;
		width: 169px;
	}
</style>

注意:

该组件默认treeData中的键是 id 和 label ,如果如上所以想改成 ids 和 label

1.

2.

3. 

多选↓

 可以通过selectCondition来取出id值

<template>
    <view v-if="isShowConfirm" class="my-confirm-notice">
        <view class="confirm-content-wrap1">
            <!-- 内容 -->
			<view class="content_margin">
				<view class="flex_row_center label_text">组织机构:
					<input type="text" disabled="true" class="inputStyle" ref='groupInput'
					 @click="popOrganization" placeholder="请选择组织机构" :value='groupName'>
				</view>
				<view v-show="isShow" class="top_level">
					<view class="flex_row_center label_text">
						<view style="width: 140rpx;"></view>
						<scroll-view style="height: 200px;" class="ly_tree_style" :scroll-y="true">
							<ly-tree ref="tree" :treeData="treeData" v-if="ready"
								nodeKey="id" @node-expand="handleNodeExpand" 
								@node-click="handleNodeClick" :showCheckbox="true" :checkOnClickNode="true" :expandOnClickNode="false"
								:defaultExpandAll="true" @check-change="handleCheck"
								></ly-tree>
						</scroll-view>
					</view>
				</view>
			</view>
        </view>
    </view>
</template>
 
 
<script>
	export default {
		data() {
		    return {
				isShowConfirm: true,
				treeData:[],
				ready:false,
				isShow:false,
				defalutValue:'请选择组织机构',
				groups:[],
				groupName:''
		    }
		},
		created() {
			console.log('created')
		},
		mounted() {
			console.log('mounted')
			this.loadData()
		},
		methods: {
			// this.$refs.tree.setCheckAll(false);
			popOrganization() {
				this.isShow = !this.isShow;
			},
			loadData() {
				setTimeout(()=> {
					this.treeData = [
						{
							id:1,label:'客流分析与管理',
							children:[
								{id:11,label:'IT部'},
								{id:12,label:'运维部'},
								{id:13,label:'营销部'},
								{id:14,label:'实施部'},
								{id:15,label:'售后部'},
							]
						},
						{
							id:2,label:'一级2',
							children:[
								{id:21,label:'二级21'},
								{id:22,label:'二级22'},
							]
						},
						{
							id:3,label:'客流分析与管理',
							children:[
								{id:31,label:'IT部'},
								{id:32,label:'运维部'},
								{id:33,label:'营销部'},
								{id:34,label:'实施部'},
								{id:35,label:'售后部'},
							]
						},
					];
					this.ready = true;
				},2000);
			},
			handleNodeExpand(obj) {
				console.log('handleNodeExpand='+JSON.stringify(obj))
			},
			handleNodeClick(obj) {
				//console.log('handleNodeClick='+JSON.stringify(obj));
			},
			handleCheck(obj) {
				console.log('handleCheck='+JSON.stringify(obj))
				this.getSelectData(obj.node);
			},
			getSelectData(obj) {
				if(obj.checked) {
					if(this.groups.indexOf(obj.data) != -1) {
						console.log('groups.contains')
					} else {
						this.groups.push(obj.data);
					}
				} else {
					var index = this.groups.indexOf(obj.data);
					console.log('groups.splice==='+index)
					if(index != -1) {
						this.groups.splice(index,1);
					}
				}
				let groupParam = '';
				let groupNames = '';
				for(var i=0;i< this.groups.length; i++) {
					if(groupParam) {
						groupParam = groupParam+','+this.groups[i].id;
					} else {
						groupParam = this.groups[i].id;
					}
					if(groupNames) {
						groupNames = groupNames+','+this.groups[i].label;
					} else {
						groupNames = this.groups[i].label;
					}
				}
				this.groupName = groupNames;
	
			}
		}
	}
</script>
 
<style lang="scss">
	.my-confirm-notice {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
		/* 这里防止当用户长按屏幕,出现的黑色背景色块,以及 iPhone 横平时字体的缩放问题 */
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
	}
	.confirm-content-wrap1 {
		position: relative;
		left: 0;
		right: 0;
		// width: 60%;
		width: 90%;
		height: 247px;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		z-index: 999;
		user-select: none;
	}

	.content_margin {
		padding: 15px 0px 15px 0px;
	}
	.flex_row_center {
		display: flex; flex-direction: row; justify-content: center; align-items: center;
	}
	.label_text {
		font-size: 28rpx;color: #555555;
	}
	.inputStyle {
		border: #bababa 0.5px solid; width: 169px;height: 34px; box-sizing: border-box; font-size: 13px; padding: 3px 2px;
	}
	.top_level {
		position: fixed;z-index: 100;width: 90%;
	}
	.ly_tree_style {
		border: #F5F5F5 1px solid; width: 169px;
	}
</style>
 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值