| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <template>
- <treeList v-for="model in list" v-bind="$attrs" :model="model" :key="model.id" @detail-node="onDetail">
- <template #icon="slotProps">
- <slot name="icon" v-bind="slotProps"></slot>
- </template>
- <template #operation="slotProps">
- <slot name="operation" v-bind="slotProps"></slot>
- </template>
- </treeList>
- </template>
- <script setup lang="ts">
- import { ref } from 'vue';
- import treeList from './treeList.vue';
- const emit = defineEmits(['detailNode']);
- interface IFileSystem {
- id: string;
- title: string;
- pid: string;
- isFolder: boolean;
- isAdd: boolean;
- children?: IFileSystem[];
- }
- const props = withDefaults(
- defineProps<{
- list: IFileSystem[];
- }>(),
- {}
- );
- // 递归寻找父组件
- function findParent(pid, Tree) {
- let targetNode = null;
- function find(item, flattenTree) {
- flattenTree.find((ele) => {
- if (ele.id == pid) {
- targetNode = ele;
- return true;
- } else {
- if (ele.children) {
- find(pid, ele.children);
- }
- }
- });
- }
- find(pid, Tree);
- return targetNode.children;
- }
- // 删除
- const onDetail = (node) => {
- emit('detailNode', {
- ...node,
- eventType: 'detail',
- });
- };
- </script>
- <style scoped></style>
|