ly-tree单选和清除数据

<template>
	<view>
		<ly-tree :tree-data="data" 
			:props="defaultProps" 
			ref="tree" 
			node-key="id" 
			show-radio 
			checkOnClickNode
			@check="handleCheck"
			@radio-change="handleRadioChange"
			@node-click="handleNodeClick" 
		/>
		<button @click="qingchu">清除</button>
	</view>
</template>


<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				defaultCheckedKeys: [],
				data: [{
					id: 1,
					label: '一级 1',
					children: [{
						id: 4,
						label: '二级 1-1',
						children: [{
							id: 9,
							label: '三级 1-1-1'
						}, {
							id: 10,
							label: '三级 1-1-2'
						}]
					}]
				}, {
					id: 2,
					label: '一级 2',
					children: [{
						id: 5,
						label: '二级 2-1'
					}, {
						id: 6,
						label: '二级 2-2'
					}]
				}, {
					id: 3,
					label: '一级 3',
					children: [{
						id: 7,
						label: '二级 3-1'
					}, {
						id: 8,
						label: '二级 3-2'
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			};
		},
		
		onLoad() {
			// 如果初始化树时设置节点选择需要做适当延时,可以在下一个事件轮询中执行
			this.$nextTick(() => {
				this.$refs.tree.setCheckedKeys([8])
			})
		},
		
		// 如果不需要不用到这些方法,需要删除相应代码,打印大量日志会造成性能损耗
		methods: {
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次),obj中包含当前选中
			handleCheck(obj) {
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }
				
				console.log('handleCheck', obj);
			},
			
			// 只要节点的选中状态改变就触发(包括设置默认选中,点击选中/取消选中),会被触发多次
			handleRadioChange(obj) {
				console.log('handleRadioChange', obj);
			},
			
			handleNodeClick(obj) {
				console.log('handleNodeClick', JSON.stringify(obj));
				console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
			},
			qingchu(){
				this.$refs.tree.setCheckedKeys([])
			}
		}
	};
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值