cameraTree.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <treeList v-for="model in list" v-bind="$attrs" :model="model" :key="model.id" @detail-node="onDetail">
  3. <template #icon="slotProps">
  4. <slot name="icon" v-bind="slotProps"></slot>
  5. </template>
  6. <template #operation="slotProps">
  7. <slot name="operation" v-bind="slotProps"></slot>
  8. </template>
  9. </treeList>
  10. </template>
  11. <script setup lang="ts">
  12. import { ref } from 'vue';
  13. import treeList from './treeList.vue';
  14. const emit = defineEmits(['detailNode']);
  15. interface IFileSystem {
  16. id: string;
  17. title: string;
  18. pid: string;
  19. isFolder: boolean;
  20. isAdd: boolean;
  21. children?: IFileSystem[];
  22. }
  23. const props = withDefaults(
  24. defineProps<{
  25. list: IFileSystem[];
  26. }>(),
  27. {}
  28. );
  29. // 递归寻找父组件
  30. function findParent(pid, Tree) {
  31. let targetNode = null;
  32. function find(item, flattenTree) {
  33. flattenTree.find((ele) => {
  34. if (ele.id == pid) {
  35. targetNode = ele;
  36. return true;
  37. } else {
  38. if (ele.children) {
  39. find(pid, ele.children);
  40. }
  41. }
  42. });
  43. }
  44. find(pid, Tree);
  45. return targetNode.children;
  46. }
  47. // 删除
  48. const onDetail = (node) => {
  49. emit('detailNode', {
  50. ...node,
  51. eventType: 'detail',
  52. });
  53. };
  54. </script>
  55. <style scoped></style>