udemo-tree/uni_modules/vrapile-tree

引用样例

<template>
	<view class="vrapile-content-001">
		<view class="vrapile-content-001-tree">
			<vrapile-tree ref="vrapileTreeRef" :defaultProps="defaultProps" 
				:data="treeList" :divider="true" :unfold="true"
				:edit="true" @node-click="nodeClick" @add-item="addNode" 
				@edit-item="editNode" @long-press="longPressNode">
			</vrapile-tree>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				treeList: [
					{ id: "A01", parentId: "0", label: "A01-全部", name: "全部", level: 1, lastFlag: 0, orderNum: 1, children: [
						{ id: "A01001", parentId: "A01", label: "A01001-架构师题库", name: "架构师题库", level: 2, lastFlag: 0, orderNum: 1, children: [
							{ id: "A01001001", parentId: "A01001", label: "A01001001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 11, children: []},
							{ id: "A01001002", parentId: "A01001", label: "A01001002-题库二", name: "题库二", level: 3, lastFlag: 1, orderNum: 12, children: []}
						]},
						{ id: "A01003", parentId: "A01", label: "A01003-大数据AI题库", name: "大数据AI题库", level: 2, lastFlag: 0, orderNum: 13, children: [
							{ id: "A01003001", parentId: "A01003", label: "A01003001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 1, children: []}
						]},
						{ id: "A01004", parentId: "A01", label: "A01004-驾照考试题库", name: "驾照考试题库", level: 2, lastFlag: 0, orderNum: 4, children: []},
					]}
				],
				
				defaultProps: { id: "id", children: "children", label: "name" },
			};
		},	
		onShow(){
		},
		methods: {
			//节点单击事件
			nodeClick(e) {
				console.log("单击事件：" + JSON.stringify(e))
			},
			//节点新增点击事件
			addNode(e) {
				console.log("新增按钮点击事件：" + JSON.stringify(e))
			},
			//节点修改点击事件
			editNode(e) {
				console.log("修改按钮点击事件：" + JSON.stringify(e))
			},
			//节点长按事件
			longPressNode(e) {
				console.log("长按事件：" + JSON.stringify(e))
			},
		}
	};
</script>
<style scoped lang="scss">
	.vrapile-content-001{
		padding: 0;
		margin: 0;
		width: 750rpx;
		height: calc(100vh - 0px);
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}
	.vrapile-content-001-tree{
		padding: 0rpx 10rpx 30rpx 10rpx;
		background-color: #ffffff;
		flex: 1;
		overflow-y: auto;
	}
</style>

功能说明

• 入参 data ：非必传，树数据结构列表，默认 []

• 入参 defaultProps ：非必传，Json格式，关键字段对照，默认 { id: 'id', children: 'children', label : 'label' }

    如：部门树，主键deptId、名称deptName、子集child，则defaultProps需设为：

    { id: "deptId", label : "deptName", children: "child" }

• 入参 divider ：非必传，分隔线，默认 false

• 入参 unfold ：非必传，是否展开，默认 false

• 入参 edit ：非必传，是否显示按钮，默认 false

• 函数 node-click ：单击，内容是Json数据体

• 函数 add-item ：添加按钮，内容是Json数据体

• 函数 edit-item ：编辑按钮，内容是Json数据体

• 函数 long-press ：长按，内容是Json数据体

注：所有入参和函数都是非必传，用到哪个实现哪个即可

演示说明

以下所有工程共用一个后端，账号互通 （ 皆可用访客账号/密码：visitor/visitor ）

演示Demo： https://www.ninecloud.top/udemo/tree/index.html

演示微信小程序： 九云题库