vue3 ant-design-vue3 tree树形控件的使用_antdesign vue tree

使用场景

        在前端日常开发中，经常遇到菜单列表，权限列表等等涉及到多层级结构的需求，那么这时候使用树形控件结构，就可以很容易的解决这些问题，当前使用的ant-design-vue3.0版本中，使用树形结构进行展示。

        原文档说明：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

设计方案

    场景一：项目呈树形结构展开。

<template>
    <div class="practice" style="margin:0 auto;">
        <div @click="showCheckedTree" style="margin:0 auto;height: 100px;width: 100px;display: flex;justify-content: center; align-items: center;background: green;">展开树</div>
        <div style="margin:0 auto;width: 400px;display: flex;justify-content: center; align-items: center;">
            <a-tree :tree-data="treeData" defaultExpandAll v-model:selectedKeys="selectedKeys" @select="selectClass" />
        </div>
        
    </div>
</template>
  
<script setup>
import {  ref,  onBeforeMount } from 'vue';
const collageList = ref(
    [
        {
            "title": "训练平台",
            "key": 480306,
            "children": [
                {
                    "title": "运营部",
                    "key": "4186473299879919616",
                    "children": [
                        {
                            "title": "运营部美术专业",
                            "key": "4186473887581601792",
                            "isLeaf": true
                        },
                        {
                            "title": "运营部研发专业",
                            "key": "4186474029177110528",
                            "isLeaf": true
                        },
                        {
                            "title": "运营部决策专业",
                            "key": "4186474205962829824",
                            "isLeaf": true
                        },
                        {
                            "title": "运营部综合专业",
                            "key": "4186480772389011456",
                            "isLeaf": true
                        }
                    ]
                },
                {
                    "title": "市场部",
                    "key": "4186473362115002368",
                    "children": [
                        {
                            "title": "市场部决策专业",
                            "key": "4186474363236646912",
                            "isLeaf": true
                        },
                        {
                            "title": "市场部产品专业",
                            "key": "4186474440822882304",
                            "isLeaf": true
                        },
                        {
                            "title": "市场部运营专业",
                            "key": "4186474560486375424",
                            "isLeaf": true
                        }
                    ]
                },
            ]
        }
    ]
)
const treeData = ref([])
const expandedKeys = ref([])
const selectedKeys = ref([])
const checkedKeys = ref([])
//选中事件 当点击标题时，触发事件
const selectClass = ([selectedKeys], e) => {
    //输出选中的key值
    console.log(selectedKeys)
}
 
const showCheckedTree = ()=>{
    treeData.value = collageList.value
}
 
onBeforeMount(()=>{
    //场景一 屏蔽该代码，点击展开树，发现未展开 defaultExpandAll 未生效
    //场景二 在渲染生命周期前加载数据，defaultExpandAll 生效
    showCheckedTree()
})
 
</script>
  
<style lang="less" scoped></style>

    场景二：树形结构+复选框展开，关闭，父级和子级之间有关联关系。

<a-tree :tree-data="treeData" defaultExpandAll v-model:selectedKeys="selectedKeys" @select="selectClass" checkable v-model:checkedKeys="checkedKeys"/>

    场景三：树形结构+复选框展开，关闭，父级和子级之间无关联关系。

<a-tree :tree-data="treeData" defaultExpandAll v-model:selectedKeys="selectedKeys" @select="selectClass" checkable checkStrictly v-model:checkedKeys="checkedKeys"/>

   

遇到问题

  1、树形控件在使用 defaultExpandAll 不展开问题？

    在使用defaultExpandAll时，需要在生命周期onMounted之前获取到完成的数据，渲染完成之后，再点击事件，加载数据，defaultExpandAll 失效，未展开。

  2、在使用 checkable 时，选择之后，容易导致子元素被选择，如何区分开来？

   在使用 checkable 是，默认选中父级元素，子级元素也会被选中，相当于全选的效果，需要需要去除，可以在 checkStrictly 

  3、树形控件使用是建议使用绑定treedata数据结构的形式，不要使用遍历循环的模式，如果数据格式和上图代码中的结构不一致，可以循环处理，成对应的数据结构，再进行渲染。

  4、在使用checkable模式的时候，checkedKeys 是复选框打钩的key值集合，不要使用 selectedKeys 作为选中的值。

  5、select 是点击树节点触发事件，当点击对应的标题，就会触发对应的时间，返回的 selectedKeys 是一个数组集合。

  6、第一行只能展开，不能收缩起来。

   主要原因是使用了 :autoExpandParent="true" 这个方法，当使用这个方法时，首行就自动展开，收缩不起来了，不论怎么点击都没有用；建议使用该方法时，慎用。

  7、在获取选中的数据是，是否使用 checkStrictly 选择数据的区别在哪里？

    在未使用 checkStrictly 时，获取选中的数据，直接使用 treeData.value.checkedKeys；

    在使用时，获取选中的数据，用 treeData.value.checkedKeys.checked;

总结分享

       在实践中学习，在学习中成长，在成长中实践，不断循环迭代。在使用一种框架时，不仅仅是使用该框架本身，更多的是要思考，在使用框架的过程中，如何将这种运用框架的能力移植到其它的框架上，毕竟互联网技术更新快，前端框架也是层出不穷，如何将这种能力梳理成一种底层的能力，这才是核心的核心。