vue实现树形tree展示组件封装

Posted 2021-12-04 chi1130

效果

在线demo🚀🐠

代码

TreeItem.vue

<template>
  <div class="tree-item">
    <div @click="handleToggle" class="tree-title">
      <i v-if="hasChild" :class="open?'el-icon-remove-outline':'el-icon-circle-plus-outline'"></i>
      <h4>{{ list.label }}</h4>
    </div>
    <div v-show='open'  class="child-content">
      <tree-item
        v-for="(item, index) in list.children"
        :list="item"
        :key="index"
      ></tree-item>
    </div>
  </div>
</template>

<script>
export default {
  name: "TreeItem",
  props: {
    list: {
      type: [Object, Array],
      required: true
    }
  },
  data() {
    return {
      open: false
    };
  },
  computed: {
    hasChild() {
      return this.list.children && this.list.children.length;
    }
  },
  methods: {
    handleToggle() {
      if (this.hasChild) {
        this.open = !this.open;
      }
    }
  }
};
</script>

<style lang='less' scoped>
.tree-item{
  font-size: 20px;
  cursor: pointer;
  .tree-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.child-content{
  margin-left: 50px;
}
</style>

Tree.vue

<template>
  <div class="tree-wrap">
    <div v-for="(item, index) in dataSource" :key="index">
      <tree-item :list="item"></tree-item>
    </div>
  </div>
</template>

<script>
import TreeItem from "./TreeItem";
export default {
  name: 'tree',
  props: {
    dataSource: {
      type: [Object, Array],
      required: true
    }
  },
  components: {
    TreeItem
  }
};
</script>
<style scoped>
.tree-wrap{
  width: 100%;
  /* padding: 0 50px; */
}
</style>

your component.vue

<template>
   <div class="tree-w">
     <x-tree :data-source="myData"></x-tree>
   </div>
</template>
<script>
import xTree from './Tree.vue'
export default {
  name: 'trees',
  components: {
    xTree
  },
  data() {
    return {
      myData: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
    }
  }
}
</script>
<style>
.tree-w{
  padding: 50px;
  padding-left: 200px;
}
</style>