vue-cli树形结构/组织结构

Posted 2021-08-21 码上暴富

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>

结果

运行结果