vue实现无限下拉树形菜单

核心：在组件内自己调用自己

1.子组件

<template>
  <ul>
    <li v-for="(item, index) in list " :key="index">
      <p class="title" @click="changeStatus(index)">{{ item.text }}</p>
      <tree-menus style="margin-left: 10px;" v-if="scopesDefault[index]" :list="item.nodes"></tree-menus>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'treeMenus',
  props: {
    list: Array
  },
  data () {
    return {
      show: false,
      scopesDefault: []
    }
  },
  methods: {
    changeStatus (index) {
      console.log(this.scopesDefault)
      if (this.scopesDefault[index] === true) {
        this.$set(this.scopesDefault, index, false)
      } else {
        this.$set(this.scopesDefault, index, true)
      }
    }
  },
  created () { }
}
</script>

<style scoped>
ul {
  list-style: none;
}

p {
  margin: 0;
}

.title {
  font-size: 20px;
  cursor: pointer;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}
</style>

父组件

<template>
  <div>
    <my-trees :list="treeData.area_list"></my-trees>
  </div>
</template>

<script>
// 父组件引用子组件
import myTrees from './TreeMenu.vue'

// 树形组件数据
const treeData = {
  state: 0,
  area_list: [{
    text: '数字治理',
    area_id: 1,
    nodes: [{
      province: '通知公告',
      city: '',
      area_id: 3,
      text: '通知公告',
      county: '',
      nodes: [{
        province: '通知公告',
        city: '三级标题',
        area_id: 5,
        text: '三级标题',
        county: '',
        nodes: [{
          province: '通知公告',
          city: '四级标题',
          area_id: 5,
          text: '四级标题',
          county: ''
        }]
      }]
    }]
  }, {
    text: '智慧康养',
    area_id: 2
  }]
}

export default {
  components: {
    // 这里别忘了注册子组件
    myTrees
  },
  data () {
    return {
      treeData
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>