Vue2 手写树形组件

递归实现一个树形组件

<template>
  <div>
    <div v-for="(item,i) in data1" :key="i">
      <!-- 有子项则显示显隐开关 -->
      <span v-if="haveChildren(item)" @click="openClose()" style="padding-right:5px">[{{open? '-' : '+'}}]</span>
      {{item.key}}
      <!-- 有子项则递归循环 -->
      <div style="margin-left: 20px" v-if="haveChildren(item) && open">
        <tree-view :data1="item.children"></tree-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 递归调用必须有组件名
  name: 'treeView',
  data() {
    return {
      open: false
    }
  },
  computed: {
    // 计算属性不能携带参数，用返回函数的形式携带参数
    haveChildren() {
      return function (item) {
        return item.children && item.children.length > 0
      }
    }
  },
  methods: {
    // 显隐开关
    openClose() {
      this.open = !this.open
    }
  },
  props: {
    data1: Array
  }
}
</script>

调用

<tree-view :data1="menu" style="margin: 100px">
// 引入
import treeView from '../../components/tree-view.vue'

效果