qjkj-tree v0.0.1

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

插槽