vue-cli树形结构/组织结构
强大的树形结构/组织结构
安装
以下教程参考自官方的教程:
https://github.com/libin1991/vue-okr-tree
这里是效果展示页面
http://www.longstudy.club/vue-okr-tree-doc/index.html
安装
执行以下语句安装:
npm i vue-okr-tree
or
yarn add vue-okr-tree
使用
<template>
<div>
<vue-okr-tree :data="testData" show-collapsable default-expand-all animate node-key="id" @node-click="handleNodeClick"></vue-okr-tree>
</div>
</template>
<script>
import {VueOkrTree} from 'vue-okr-tree';
import 'vue-okr-tree/dist/vue-okr-tree.css'
export default {
components: {
VueOkrTree
},
data() {
return {
treeData: [
{
label: 'xxx银行总行',
children: [
{
label: 'xxx分行',
children: [
{
label: '1 支行',
},
{
label: '2 支行',
children: [
{
label: '2-1办事处'
}
]
},
{
label: '3 支行',
children: [
{
label: '3-1办事处'
}
]
},
{
label: '4 支行',
},
]
}
],
}
]
}
},
methods: {
handleNodeClick (data) {
console.log((`我是${data.label},我被点击了`));
},
}
}
</script>
结果
运行结果 |
---|
![]() |
树形结构/组织结构
安装
以下教程参考自官方的教程:
https://github.com/tower1229/Vue-Tree-Chart
导入
执行以下语句安装:
npm i vue-tree-chart --save
引用
以vue-cli创建的项目为例,在vue文件中的scrit标签内导入数据:
import TreeChart from “vue-tree-chart”;
使用
<template>
<div>
<div>
<TreeChart :json="treeData"/>
</div>
</div>
</template>
<script>
import TreeChart from "vue-tree-chart";
export default {
name: 'Home',
components: {
TreeChart
},
data() {
return {
treeData: {
name: 'root',
// image_url: "https://xxx/avat.jpg"
class: ["rootNode"],
children: [
{
name: 'children1',
// image_url: "https://xxx/avat.jpg"
},
{
name: 'children2',
// image_url: "https://xxx/avat.jpg"
mate: [{
name: 'mate',
// image_url: "https://xxx/avat.jpg"
}],
children: [
{
name: 'grandchild',
// image_url: "https://xxx/avat.jpg"
},
{
name: 'grandchild2',
// image_url: "https://xxx/avat.jpg"
},
{
name: 'grandchild3',
// image_url: "https://xxx/avat.jpg"
}
]
},
{
name: 'children3',
// image_url: "https://xxx/avat.jpg"
}
]
}
}
}
}
</script>
结果
运行结果 |
---|
![]() |