vue 树形结构展示

Posted 2023-04-28 小星星

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 树形结构展示相关的知识，希望对你有一定的参考价值。

1、效果图

2、代码
子组件

点击查看代码

<template>
  
    <div id="tree">
        <div class="checkThem" >
            <div v-for="item in treeList" :key="item.id">
                <!-- 一级的 -->
                <div class="check_checkThem_first flex-h flex-vh-center">
                    <div class="tree_name" >
                        <span> item.userName -item.orgName</span>
                        <div v-if="item.userName" class="tag_box">
                            <nut-tag color="#12BB82" v-if="item.currentProgress == \'已完成\'"> item.currentProgress
                            </nut-tag>
                            <nut-tag color="#999999" v-else-if="item.currentProgress == \'未完成\'"> item.currentProgress
                            </nut-tag>
                            <nut-tag color="#ED522F" v-else> item.currentProgress </nut-tag>
                        </div>
                    </div>
                    <div v-if="!item.userName && item.childrenList.length > 0">
                        <div class="open_img click_img" v-show="showFlagList[item.orgCode]"
                            @click.stop="handleChack(\'up\', item)">
                            <img src="@/assets/images/up.png" >
                        </div>
                        <div class="down_img click_img" v-show="!showFlagList[item.orgCode]"
                            @click.stop="handleChack(\'down\', item)">
                            <img src="@/assets/images/down.png" >
                        </div>
                    </div>
                    <!-- 二级的 -->
                    <div :class="\'tree_level\' + item.level" class="check_checkThem_second flex-h flex-vh-center"
                        v-show="showFlagList[item.orgCode] && item.childrenList && JSON.stringify(item.childrenList) != \'[]\'">
                        <TaskTree :treeList="item.childrenList"></TaskTree>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script setup>
import  defineProps, reactive  from \'vue\'
import  useRouter  from \'vue-router\';
import store from \'@/store\'
const props = defineProps([\'treeList\', \'searchName\'])
const $router = useRouter();
const showFlagList = reactive()
const handleChack = (falg, item) => 
    //点击
    if (falg === \'down\') 
        //展开
        showFlagList[item.orgCode] = true
     else 
        //关闭
        showFlagList[item.orgCode] = false
    



</script>
<style lang="scss" scoped>
$padLeft: 20px;

.check_checkThem_first 
    position: relative;
    min-height: 48px;
    line-height: 48px;

    .tree_name 
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid #ECECEC;
        box-sizing: border-box;

        .tree_img 
            width: 16px;
            height: 18px;
            margin-right: 4px;
            vertical-align: middle;

        
    


.tree_level1 
    .tree_name 
        padding-left: $padLeft * 1;
    


.tree_level2 
    .tree_name 
        padding-left: $padLeft * 2;
    


.tree_level3 
    .tree_name 
        padding-left: $padLeft * 3;
    


.tree_level4 
    .tree_name 
        padding-left: $padLeft * 4;
    


.tree_level5 
    .tree_name 
        padding-left: $padLeft * 5;
    


.tree_level6 
    .tree_name 
        padding-left: $padLeft * 6;
    


.tree_level7 
    .tree_name 
        padding-left: $padLeft * 7;
    


.tree_level8 
    .tree_name 
        padding-left: $padLeft * 8;
    


.tree_level9 
    .tree_name 
        padding-left: $padLeft * 9;
    


.tree_level10 
    .tree_name 
        padding-left: $padLeft * 10;
    


.tree_level11 
    .tree_name 
        padding-left: $padLeft * 11;
    


.click_img 
    position: absolute;
    right: 0;
    top: 0;


.open_img 
    width: 12px;
    height: 12px;
    margin-right: 2%;

    img 
        width: 100%;
    


.down_img 
    width: 12px;
    height: 16px;
    margin-right: 2%;

    img 
        width: 100%;
    


.tag_box 
    .nut-tag 
        position: absolute;
        right: 0;
        top: calc(50% - 10px);
        min-width: 38px;
        height: 16px;
        opacity: 1;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        font-size: 10px;
        color: #fff;
    

</style>

2、父组件

点击查看代码

<template>
    <div class="check_content">
        <div class="list_box">
            <TaskTree :treeList="treeList" :searchName="queryData.userName"></TaskTree>
        </div>
    </div>
</template>
<script setup>
import  ref, onMounted, reactive  from \'vue\';
import TaskTree from \'@/components/TaskTree\'
import  assignmentCheckPerson  from \'@/axios/index\'
import  useRoute  from \'vue-router\';
import dayjs from \'dayjs\';
const $route = useRoute();
onMounted(() => 
    queryData = $route.query
    getList()
)
const isVisible = ref(false)
let queryData = reactive(
    orgCode: \'\',
    startDate: \'\',
    endDate: \'\',
    userName: \'\'
)
const treeList = ref([])//一级查询总数据

const getList = () => 
    queryData.userName = searchValue.value
    queryData.startDate = dateTimeStr.value
    queryData.endDate = dateTimeStr.value
    assignmentCheckPerson(queryData).then((response) => 
        renderTree(response.data, 1)
        treeList.value = response.data
    )

// 数据处理成自己需要的结构
const renderTree = (data, level) => 
    return data.map((item) => 
        item.level = level;
            if(!item.childrenList || JSON.stringify(item.childrenList) == \'[]\')
                item.childrenList=[]
            
            if(!item.userProgressVOList || JSON.stringify(item.userProgressVOList) == \'[]\')
                item.userProgressVOList=[]
            
            // console.log(item.childrenList,item.userProgressVOList);
            item.childrenList = item.childrenList.concat([...item.userProgressVOList])
            renderTree(item.childrenList, level + 1);
    );
;

</script>
<style scoped lang=\'scss\'>
.list_box 
    margin: 0 16px;

</style>

参考：https://blog.csdn.net/weixin_44326389/article/details/118613647

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>

结果

运行结果

以上是关于vue 树形结构展示的主要内容，如果未能解决你的问题，请参考以下文章

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

如何将后台的树形数据、倒序的展示到前台vue+饿了么UI组件中的面包屑里面呢

vue实现树形tree展示组件封装