tree

颜星做的基于 Vue 的tree树形控件。

import Vue from 'vue'
import App from './App.vue'
import tree from 'vue-tree-yanxing'
import 'vue-tree-yanxing/lib/vue-tree-yanxing.css'
Vue.use(tree)

<template>
  <div id="app">
      <tree 
      :data="list" 
      :props="defaultprop"
      />
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {
    defaultprop: {
          label: 'name',
          children: 'child'
    },
    list: [{
                name: 'IT互联网',
                child: [{
                        name: '编辑语言',
                        child: [{ name: 'java' }, { name: 'c#/.net' }, { name: 'python' },
                            { name: '前端开发', child: [{ name: 'jq' }, { name: 'vue' }, { name: 'react' }] }
                        ]
                    },
                    { name: '移动开发', child: [{ name: 'android开发' }, { name: 'IOS开发' }] },
                    { name: '游戏开发', child: [{ name: 'phaser游戏开发' }, { name: 'webGL游戏开发', child: [{ name: '3D游戏' }] }] }
                ]
            },
            {
                name: '设计创作',
                child: [{ name: '平面设计', child: [{ name: '电商美工' }, { name: '综合平面设计' }, { name: '摄影后期' }] },
                    { name: 'UI设计', child: [{ name: '交互设计' }, { name: 'webUI设计' }, { name: '游戏UI设计' }] },
                    { name: '软件设计' }
                ]
            },
            {
                name: '升学考研',
                child: [{ name: '考研' }, { name: '大学' }, { name: '高中' }, { name: '初中' }]
            },
            {
                name: '职企考证',
                child: [{ name: '公务员', child: [{ name: '教师考试' }, { name: '建筑工程' }] }]
            }
        ]

    }
  }
}
</script>

<style>

</style>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | data | 展示数据 | array | — | — | | props | 配置选项，具体看下表 | object | - | - |

props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | label | 指定节点标签为节点对象的某个属性值 | string | — | 'label' | | children | 指定子树为节点对象的某个属性值 | string | - | 'children' |