qjkj-tree   1.1

适用于 Vue 3 和 TypeScript 的 tree 包装组件

特点

1. 支持 Vue 3 和 TypeScript；
2. 零插件；
3. 虚拟树，计算更新视图内节点；

安装

npm i qjkj-tree

用法

<template>
  <tree :data="data">
    <template v-slot:nodeHeader="{ row }">
      <!-- {{ row.leve }} -->
    </template>
  </tree>

  <dragTree :data="data" :draggable="true"/>
</template>

<script setup>
  import { ref } from 'vue';
  import { tree, dragTree } from 'qjkj-tree';

  const data = ref([
	{
		id: '1',
		label: '一级 1',
		children: [
			{
				id: '1-1',
				label: '二级 1-1',
				children: [
					{
						id: '1-1-1',
						label: '三级 1-1-1',
					},
				],
			},
		],
	},
	{
		id: '2',
		label: '一级 2',
		children: [
			{
				id: '2-1',
				label: '二级 2-1',
				children: [
					{
						id: '2-1-1',
						label: '三级 2-1-1',
					},
				],
			},
			{
				id: '2-2',
				label: '二级 2-2',
				children: [
					{
						id: '2-2-1',
						label: '三级 2-2-1',
					},
				],
			},
		],
	},
	{
		id: '3',
		label: '一级 3',
		children: [
			{
				id: '3-1',
				label: '二级 3-1',
				children: [
					{
						id: '3-1-1',
						label: '三级 3-1-1',
					},
				],
			},
			{
				id: '3-2',
				label: '二级 3-2',
				children: [
					{
						id: '3-2-1',
						label: '三级 3-2-1',
					},
				],
			},
		],
	},
	{
		id: '4',
		label: '一级 4',
		children: [
			{
				id: '4-1',
				label: '二级 4-1',
				children: [
					{
						id: '4-1-1',
						label: '三级 4-1-1',
					},
				],
			},
			{
				id: '4-2',
				label: '二级 4-2',
				children: [
					{
						id: '4-2-1',
						label: '三级 4-2-1',
					},
				],
			},
		],
	},
]);
</script>

props

|名称|类型|默认值|响应性|说明| |-|-|-|-|-| |data|Array |[ ]|✅|tree数据| |draggable|boolean|false||设置节点可拖拽 | |nodeSize|number|30||节点高度，用于计算视图展示节点数量| |props|object|{ children: 'children', label: 'label' }||配置选项| |nodeKey|string |id||每个树节点用来作为唯一标识的属性，整棵树应该是唯一的| |defaultExpandAll|boolean|false||是否默认展开所有节点 |

插槽

|插槽名|说明| |-|-| |nodeHeader|树节点的label前插入内容， 自定义树节点的内容， 参数为 { row }|