Vue.js的通用且灵活的树组件

Vue树 (vue-vtree)

Universal and flexible tree component for Vue.js.

Vue.js的通用且灵活的树组件。

Demo for JSON JSON View Demo 演示 Demo for Number 演示Number演示

安装 (Installation)

NPM (NPM)

npm install vue-vtree

CDN (CDN)

jsDelivr (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-tree.min.js"></script>

取消包装 (unpkg)

<script src="https://unpkg.com/vue-vtree"></script>

入门 (Getting Started)

In your script entry point:

在脚本入口点：

import Vue from 'vue';
import VTree from 'vue-vtree';
Vue.component('v-tree', VTree);

用法 (Usage)

Just write one level of tree in scoped-slot and pass children data to empty child v-tree component and it will inherit the parent slot template.

只需在作用域插槽中写入一棵树并将子级数据传递到空子级v-tree组件，它将继承父级插槽模板。

<template>
  <div id="app">
    <v-tree :scope-data="menu">
      <ul slot-scope="menuLevel">
        <li v-for="menuItem in menuLevel">
          <a :href="menuItem.url">{{ menuItem.title }}</a>
          <v-tree v-if="menuItem.children" :scope-data="menuItem.children"></v-tree>
        </li>
      </ul>
    </v-tree>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        menu: [
          { title: 'Home', url: '#' },
          {
            title: 'Posts',
            url: '#',
            children: [
              { title: 'Development', url: '#' },
              { title: 'Design', url: '#' },
              { title: 'Other', url: '#' }
            ]
          },
          {
            title: 'Handbooks',
            url: '#',
            children: [
              {
                title: 'HTML',
                url: '#',
                children: [
                  { title: 'a', url: '#' },
                  { title: 'span', url: '#' },
                  { title: 'div', url: '#' }
                ]
              },
              {
                title: 'CSS',
                url: '#',
                children: [
                  { title: 'display', url: '#' },
                  { title: 'position', url: '#' },
                  { title: 'background', url: '#' },
                  { title: 'border', url: '#' }
                ]
              },
            ]
          },
        ]
      }
    }
  }
</script>

翻译自: https://vuejsexamples.com/universal-and-flexible-tree-component-for-vue-js/