cameraTree.vue 1.3 KB

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