bunny-admin-element-thin-i18n/other-views/able/line-tree.vue

<script lang="ts" setup>
import { computed } from 'vue';
import { clone } from '@pureadmin/utils';
import ElTreeLine from '@/components/ReTreeLine';
import { deleteChildren, extractPathList } from '@/utils/tree';
import { usePermissionStoreHook } from '@/store/modules/permission';

defineOptions({
	name: 'LineTree',
});

const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
const menusData = computed(() => {
	return deleteChildren(menusTree);
});
const expandedKeys = extractPathList(menusData.value);
const dataProps = {
	value: 'uniqueId',
	children: 'children',
};
</script>

<template>
	<el-card shadow="never">
		<template #header>
			<div class="card-header">
				<p class="font-medium">扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线</p>
				<el-link class="mt-2" href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/line-tree.vue" target="_blank"> 代码位置 src/views/able/line-tree.vue </el-link>
			</div>
		</template>

		<el-row :gutter="24">
			<el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24" class="mb-[20px]">
				<el-card shadow="never">
					<template #header>
						<div class="card-header">普通树结构</div>
					</template>
					<div class="max-h-[550px] overflow-y-auto">
						<el-tree :data="menusData" :indent="30" :props="dataProps" default-expand-all node-key="uniqueId" show-checkbox>
							<template v-slot:default="{ node }">
								<el-tree-line :node="node" :showLabelLine="true">
									<template v-slot:node-label>
										<span class="text-sm">
											{{ $t(node.data.meta.title) }}
										</span>
									</template>
								</el-tree-line>
							</template>
						</el-tree>
					</div>
				</el-card>
			</el-col>

			<el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
				<el-card shadow="never">
					<template #header>
						<div class="card-header">虚拟树结构</div>
					</template>
					<div class="max-h-[550px] overflow-y-auto">
						<el-tree-v2 :data="menusData" :default-expanded-keys="expandedKeys" :height="550" :props="dataProps" show-checkbox>
							<template v-slot:default="{ node }">
								<el-tree-line :indent="30" :node="node" :showLabelLine="true" :treeData="menusData">
									<template v-slot:node-label>
										<span class="text-sm">
											{{ $t(node.data.meta.title) }}
										</span>
									</template>
								</el-tree-line>
							</template>
						</el-tree-v2>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-card>
</template>