使用场景
在前端日常开发中,经常遇到菜单列表,权限列表等等涉及到多层级结构的需求,那么这时候使用树形控件结构,就可以很容易的解决这些问题,当前使用的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;
总结分享
在实践中学习,在学习中成长,在成长中实践,不断循环迭代。在使用一种框架时,不仅仅是使用该框架本身,更多的是要思考,在使用框架的过程中,如何将这种运用框架的能力移植到其它的框架上,毕竟互联网技术更新快,前端框架也是层出不穷,如何将这种能力梳理成一种底层的能力,这才是核心的核心。