92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { ref, computed } from "vue";
|
||
import { clone } from "@pureadmin/utils";
|
||
import type { ElTreeV2 } from "element-plus";
|
||
import { transformI18n } from "@/plugins/i18n";
|
||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||
import { extractPathList, deleteChildren } from "@/utils/tree";
|
||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||
import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
|
||
import NodeTree from "@iconify-icons/ri/node-tree";
|
||
|
||
defineOptions({
|
||
name: "MenuTree"
|
||
});
|
||
|
||
interface treeNode extends TreeNode {
|
||
meta: {
|
||
title: string;
|
||
};
|
||
}
|
||
|
||
const query = ref("");
|
||
const dataProps = ref({
|
||
value: "uniqueId",
|
||
children: "children"
|
||
});
|
||
const treeRef = ref<InstanceType<typeof ElTreeV2>>();
|
||
const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
|
||
|
||
const menusData = computed(() => {
|
||
return deleteChildren(menusTree);
|
||
});
|
||
|
||
const expandedKeys = extractPathList(menusData.value);
|
||
|
||
const onQueryChanged = (query: string) => {
|
||
(treeRef as any).value!.filter(query);
|
||
};
|
||
|
||
const filterMethod = (query: string, node: treeNode) => {
|
||
return transformI18n(node.meta.title)!.indexOf(query) !== -1;
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium">
|
||
菜单树结构（采用 Element Plus 的
|
||
<el-link
|
||
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
|
||
target="_blank"
|
||
:icon="useRenderIcon(NodeTree)"
|
||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||
>
|
||
Tree V2
|
||
</el-link>
|
||
组件并支持国际化）
|
||
</span>
|
||
</div>
|
||
<el-link
|
||
class="mt-2"
|
||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/menu-tree.vue"
|
||
target="_blank"
|
||
>
|
||
代码位置 src/views/able/menu-tree.vue
|
||
</el-link>
|
||
</template>
|
||
<el-input
|
||
v-model="query"
|
||
class="mb-4"
|
||
placeholder="请输入关键字查找"
|
||
clearable
|
||
@input="onQueryChanged"
|
||
/>
|
||
<el-tree-v2
|
||
ref="treeRef"
|
||
:data="menusData"
|
||
:props="dataProps"
|
||
show-checkbox
|
||
:height="500"
|
||
:filter-method="filterMethod"
|
||
:default-expanded-keys="expandedKeys"
|
||
>
|
||
<template #default="{ data }">
|
||
<span>{{ transformI18n(data.meta.title) }}</span>
|
||
</template>
|
||
</el-tree-v2>
|
||
</el-card>
|
||
</template>
|