Tree.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <div class="p-tree">
  3. <TreeNode
  4. :multiple="multiple"
  5. :linkage="linkage"
  6. :lastStage="lastStage"
  7. v-for="(item, ind) in treeData"
  8. :key="item.id+'-'+ind"
  9. :treeItem="item"
  10. :triangleShow="!!(item.children&&item.children.length)"
  11. :index="String(ind)"
  12. :change="change"
  13. :leftPosition="leftPosition"
  14. />
  15. </div>
  16. </template>
  17. <script>
  18. import TreeNode from "./depend/treeNode";
  19. export default {
  20. name: "Tree",
  21. components: { TreeNode },
  22. props: {
  23. /**
  24. * 是否开启多选
  25. */
  26. multiple: {
  27. type: Boolean,
  28. default: false
  29. },
  30. /**
  31. * 是否联动选择
  32. */
  33. linkage: {
  34. type: Boolean,
  35. default: true
  36. },
  37. /**
  38. * 只能选择末级
  39. */
  40. lastStage: {
  41. type: Boolean,
  42. default: false
  43. },
  44. /**
  45. * 是否返回半选状态的id
  46. */
  47. notNull: {
  48. type: Boolean,
  49. default: false
  50. },
  51. /**
  52. * 树形结构数据列表
  53. */
  54. data: {
  55. type: Array,
  56. default: () => []
  57. },
  58. // 左侧距离
  59. leftPosition: {
  60. type: Number,
  61. default: 12
  62. }
  63. },
  64. computed: {
  65. treeData: {
  66. get() {
  67. return this.data;
  68. },
  69. set(newData) {
  70. return newData;
  71. }
  72. }
  73. },
  74. methods: {
  75. /**
  76. * 点击某项
  77. * @param obj 返回当前点击对象
  78. * @param index 索引串
  79. */
  80. change(obj, index) {
  81. const { id } = obj;
  82. if (this.multiple) {
  83. const iArr = index.split("-"); // 拿到索引值
  84. iArr.pop(); // 这里不需要遍历最后一个索引的数据
  85. const data = this.treeData;
  86. if (this.linkage) this.changeParentChecked(data, iArr);
  87. const checkedObj = this.filterIds(data);
  88. const checkedIds = checkedObj.map(d => d.id);
  89. /**
  90. * 点击某项返回的数据
  91. * @param id
  92. * @param checkedIds 选择的id组,多选时才返回
  93. * @param obj 选择的当前对象,多选时才返回
  94. * @param checkedObj 选择的对象组,多选时才返回
  95. * @type Function
  96. */
  97. this.$emit("change", { id, checkedIds, obj, checkedObj });
  98. } else {
  99. this.treeData = this.changeCheckedItem(this.treeData, id);
  100. /**
  101. * 点击某项返回的数据
  102. * @param id
  103. * @type Function
  104. */
  105. this.$emit("change", obj);
  106. }
  107. },
  108. /**
  109. * 单选改变状态
  110. * @param data
  111. * @param id
  112. * @return {*}
  113. */
  114. changeCheckedItem(data, id) {
  115. return data.map(d => {
  116. if (d.id === id) {
  117. d.checked = "checked";
  118. } else {
  119. d.checked = "uncheck";
  120. }
  121. if (d.children && d.children.length)
  122. d.children = this.changeCheckedItem(d.children, id);
  123. return d;
  124. });
  125. },
  126. /**
  127. * 递归筛选子项有选中的数据
  128. * @param data
  129. * @param iArr
  130. * @param curr 筛选到的数据放入数组
  131. */
  132. currentData(data, iArr, curr) {
  133. const ind = iArr.shift();
  134. data.forEach((d, i) => {
  135. if (ind && i === Number(ind)) {
  136. curr.unshift(d);
  137. if (d.children && d.children.length)
  138. this.currentData(d.children, iArr, curr);
  139. }
  140. });
  141. },
  142. /**
  143. * 筛选选中的id
  144. */
  145. filterIds(data) {
  146. const arr = [];
  147. this.recursionIds(data, arr);
  148. return arr;
  149. },
  150. /**
  151. * 筛选选中的id
  152. * @param data
  153. * @param arr
  154. */
  155. recursionIds(data, arr) {
  156. data.forEach(d => {
  157. if (this.notNull) {
  158. if (d.checked === "checked" || d.checked === "notNull") arr.push(d);
  159. } else {
  160. if (d.checked === "checked") arr.push(d);
  161. }
  162. if (d.children && d.children.length) this.recursionIds(d.children, arr);
  163. });
  164. }
  165. }
  166. };
  167. </script>
  168. <style lang="less">
  169. .p-tree {
  170. width: 100%;
  171. overflow-x: hidden;
  172. font-size: 0;
  173. }
  174. .p-tree-node {
  175. width: 100%;
  176. }
  177. .p-tree-node-content {
  178. position: relative;
  179. width: 100%;
  180. cursor: pointer;
  181. &:hover {
  182. background-color: #f5f6f7;
  183. }
  184. &.p-tree-node-content-checked {
  185. background-color: #e1f2ff;
  186. .p-tree-node-check {
  187. .p-tree-node-title {
  188. .p-tree-node-name {
  189. color: #0091ff;
  190. }
  191. }
  192. }
  193. }
  194. }
  195. .p-tree-svg {
  196. display: inline-block;
  197. vertical-align: middle;
  198. margin-right: 8px;
  199. width: 16px;
  200. height: 16px;
  201. line-height: 16px;
  202. text-align: center;
  203. .p-tree-icon-svg {
  204. vertical-align: text-bottom;
  205. transform: rotate(90deg);
  206. transition: transform 0.3s;
  207. }
  208. .p-tree-icon-rotate {
  209. transform: rotate(180deg);
  210. }
  211. }
  212. .p-tree-node-check {
  213. display: inline-block;
  214. vertical-align: middle;
  215. width: calc(100% - 24px);
  216. .p-tree-node-title {
  217. position: relative;
  218. display: inline-block;
  219. vertical-align: middle;
  220. user-select: none;
  221. width: calc(100% - 24px);
  222. .p-tree-node-name {
  223. width: 100%;
  224. height: 38px;
  225. line-height: 38px;
  226. white-space: nowrap;
  227. text-overflow: ellipsis;
  228. overflow: hidden;
  229. font-size: 14px;
  230. color: #1F2329;
  231. }
  232. }
  233. }
  234. .p-tree-node-content-disabled {
  235. // pointer-events none
  236. cursor: pointer;
  237. .p-tree-node-name {
  238. color: #004275 !important;
  239. }
  240. }
  241. .p-tree-child {
  242. width: 100%;
  243. }
  244. </style>