tree.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <script setup lang="ts">
  2. interface User {
  3. id: number;
  4. date: string;
  5. name: string;
  6. hasChildren?: boolean;
  7. children?: User[];
  8. }
  9. const load = (
  10. row: User,
  11. treeNode: unknown,
  12. resolve: (date: User[]) => void
  13. ) => {
  14. setTimeout(() => {
  15. resolve([
  16. {
  17. id: 31,
  18. date: "2016-05-01",
  19. name: "wangxiaohu"
  20. },
  21. {
  22. id: 32,
  23. date: "2016-05-01",
  24. name: "wangxiaohu"
  25. }
  26. ]);
  27. }, 1000);
  28. };
  29. const tableData: User[] = [
  30. {
  31. id: 1,
  32. date: "2016-05-02",
  33. name: "wangxiaohu"
  34. },
  35. {
  36. id: 2,
  37. date: "2016-05-04",
  38. name: "wangxiaohu"
  39. },
  40. {
  41. id: 3,
  42. date: "2016-05-01",
  43. name: "wangxiaohu",
  44. children: [
  45. {
  46. id: 31,
  47. date: "2016-05-01",
  48. name: "wangxiaohu"
  49. },
  50. {
  51. id: 32,
  52. date: "2016-05-01",
  53. name: "wangxiaohu"
  54. }
  55. ]
  56. },
  57. {
  58. id: 4,
  59. date: "2016-05-03",
  60. name: "wangxiaohu"
  61. }
  62. ];
  63. const tableData1: User[] = [
  64. {
  65. id: 1,
  66. date: "2016-05-02",
  67. name: "wangxiaohu"
  68. },
  69. {
  70. id: 2,
  71. date: "2016-05-04",
  72. name: "wangxiaohu"
  73. },
  74. {
  75. id: 3,
  76. date: "2016-05-01",
  77. name: "wangxiaohu",
  78. hasChildren: true
  79. },
  80. {
  81. id: 4,
  82. date: "2016-05-03",
  83. name: "wangxiaohu"
  84. }
  85. ];
  86. const columns: TableColumnList = [
  87. {
  88. label: "日期",
  89. prop: "date"
  90. },
  91. {
  92. label: "姓名",
  93. prop: "name"
  94. }
  95. ];
  96. </script>
  97. <template>
  98. <div>
  99. <pure-table
  100. :data="tableData"
  101. :columns="columns"
  102. row-key="id"
  103. border
  104. default-expand-all
  105. class="mb-6"
  106. />
  107. <pure-table
  108. :data="tableData1"
  109. :columns="columns"
  110. row-key="id"
  111. border
  112. lazy
  113. :load="load"
  114. :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  115. />
  116. </div>
  117. </template>