Vue.js 树状列表展开组件实现 - 可扩展结构的代码示例

以下是一个基于 Vue.js 的可展开树状列表的示例：

HTML 模板：

<div id='app'>
  <ul>
    <li v-for='item in data' :key='item.id'>
      <span @click='toggle(item)'>
        {{ item.name }}
        <i v-show='item.children && item.children.length > 0' :class='{'fa': true, 'fa-caret-right': !item.expanded, 'fa-caret-down': item.expanded}'></i>
      </span>
      <ul v-if='item.expanded'>
        <template v-if='item.children'>
          <tree-item :data='item.children'></tree-item>
        </template>
      </ul>
    </li>
  </ul>
</div>

<template id='tree-item'>
  <li v-for='item in data' :key='item.id'>
    <span @click='toggle(item)'>
      {{ item.name }}
      <i v-show='item.children && item.children.length > 0' :class='{'fa': true, 'fa-caret-right': !item.expanded, 'fa-caret-down': item.expanded}'></i>
    </span>
    <ul v-if='item.expanded'>
      <template v-if='item.children'>
        <tree-item :data='item.children'></tree-item>
      </template>
    </ul>
  </li>
</template>

JavaScript 代码：

Vue.component('tree-item', {
  template: '#tree-item',
  props: ['data'],
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
})

new Vue({
  el: '#app',
  data: {
    data: [{
      id: 1,
      name: 'Item 1',
      children: [{
        id: 2,
        name: 'Item 1.1',
        children: [{
          id: 3,
          name: 'Item 1.1.1'
        }, {
          id: 4,
          name: 'Item 1.1.2'
        }]
      }, {
        id: 5,
        name: 'Item 1.2',
        children: [{
          id: 6,
          name: 'Item 1.2.1'
        }, {
          id: 7,
          name: 'Item 1.2.2'
        }]
      }]
    }, {
      id: 8,
      name: 'Item 2',
      children: [{
        id: 9,
        name: 'Item 2.1'
      }, {
        id: 10,
        name: 'Item 2.2'
      }]
    }]
  },
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
})

在这个示例中，使用了两个组件：一个是树状列表的父组件，另一个是树状列表的子组件。父组件使用了 v-for 指令来遍历数据，并在每个节点上添加了一个点击事件，用于展开或收起子节点。子组件也使用了 v-for 指令来递归渲染子节点。

在 JavaScript 代码中，定义了一个 Vue 实例，并在 data 属性中定义了树状列表的数据。toggle 方法用于切换节点的展开状态。在模板中，使用了 font-awesome 图标库中的图标来表示节点的展开状态。