tn-tree-view.vue 940 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <view class="tn-tree-view-class tn-tree-view">
  3. <tn-tree-node
  4. v-for="(item, index) in treeData"
  5. :key="index"
  6. :node="item"
  7. :collapsible="collapsible"
  8. :triangle="triangle"
  9. @click="handleClick"
  10. ></tn-tree-node>
  11. </view>
  12. </template>
  13. <script>
  14. //如果未开启easycom模式,请自行引入tn-tree-node组件
  15. export default {
  16. name: 'tn-tree-view',
  17. props: {
  18. // 节点信息
  19. treeData: {
  20. type: Array,
  21. default() {
  22. return []
  23. }
  24. },
  25. // 可以折叠
  26. collapsible: {
  27. type: Boolean,
  28. default: true
  29. },
  30. // 显示三角形
  31. triangle: {
  32. type: Boolean,
  33. default: true
  34. }
  35. },
  36. methods: {
  37. handleClick(e) {
  38. this.$emit('click', e)
  39. }
  40. }
  41. }
  42. </script>
  43. <style lang="scss" scoped>
  44. .tn-tree-view {
  45. width: 100%;
  46. position: relative;
  47. }
  48. </style>