itemTree.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <div class="treeList">
  3. <div class="tree-body">
  4. <a-tree
  5. v-model="checkedKeys"
  6. checkable
  7. :expanded-keys="expandedKeys"
  8. :auto-expand-parent="autoExpandParent"
  9. :selected-keys="selectedKeys"
  10. :tree-data="treeData"
  11. @expand="onExpand"
  12. @select="onSelect"
  13. />
  14. </div>
  15. <div class="btn-list">
  16. <a-button type="link">恢复默认</a-button>
  17. <a-button>取消</a-button>
  18. <a-button type="primary">按钮</a-button>
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. import { queryByGroup } from "@/api/editer.js";
  24. const treeData = [
  25. {
  26. title: "0-0",
  27. key: "0-0",
  28. children: [
  29. {
  30. title: "0-0-0",
  31. key: "0-0-0",
  32. children: [
  33. { title: "0-0-0-0", key: "0-0-0-0" },
  34. { title: "0-0-0-1", key: "0-0-0-1" },
  35. { title: "0-0-0-2", key: "0-0-0-2" }
  36. ]
  37. },
  38. {
  39. title: "0-0-1",
  40. key: "0-0-1",
  41. children: [
  42. { title: "0-0-1-0", key: "0-0-1-0" },
  43. { title: "0-0-1-1", key: "0-0-1-1" },
  44. { title: "0-0-1-2", key: "0-0-1-2" }
  45. ]
  46. },
  47. {
  48. title: "0-0-2",
  49. key: "0-0-2"
  50. }
  51. ]
  52. },
  53. {
  54. title: "0-1",
  55. key: "0-1",
  56. children: [
  57. { title: "0-1-0-0", key: "0-1-0-0" },
  58. { title: "0-1-0-1", key: "0-1-0-1" },
  59. { title: "0-1-0-2", key: "0-1-0-2" }
  60. ]
  61. },
  62. {
  63. title: "0-2",
  64. key: "0-2"
  65. }
  66. ];
  67. export default {
  68. data() {
  69. return {
  70. expandedKeys: ["", ""],
  71. autoExpandParent: true,
  72. checkedKeys: [""],
  73. selectedKeys: [],
  74. treeData
  75. };
  76. },
  77. watch: {
  78. checkedKeys(val) {
  79. console.log("onCheck", val);
  80. }
  81. },
  82. methods: {
  83. onExpand(expandedKeys) {
  84. console.log("onExpand", expandedKeys);
  85. // if not set autoExpandParent to false, if children expanded, parent can not collapse.
  86. // or, you can remove all expanded children keys.
  87. this.expandedKeys = expandedKeys;
  88. this.autoExpandParent = false;
  89. },
  90. onCheck(checkedKeys) {
  91. console.log("onCheck", checkedKeys);
  92. this.checkedKeys = checkedKeys;
  93. },
  94. onSelect(selectedKeys, info) {
  95. console.log("onSelect", info);
  96. this.selectedKeys = selectedKeys;
  97. },
  98. queryByGroup() {
  99. queryByGroup().then(res => {
  100. this.treeData = this.mapTree(res.Content);
  101. });
  102. },
  103. mapTree(tree) {
  104. const newTree = [];
  105. tree.forEach(item => {
  106. if (item.Category && item.Category.length) {
  107. const children = this.mapTree(item.Category);
  108. newTree.push({
  109. title: item.Name,
  110. key: item.Id,
  111. children
  112. });
  113. } else {
  114. newTree.push({
  115. title: item.Name,
  116. key: item.Id,
  117. children: []
  118. });
  119. }
  120. });
  121. return newTree;
  122. }
  123. },
  124. created() {
  125. this.queryByGroup();
  126. }
  127. };
  128. </script>
  129. <style lang="less">
  130. .treeList {
  131. width: 240px;
  132. .tree-body {
  133. height: 420px;
  134. overflow-y: auto;
  135. }
  136. }
  137. </style>