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