【vue3】通过 elmentui 中的 el-tree树状栏实现数据筛选

初始进入页面展示所有数据

单击tree某一节点，查询列表数据

需求：通过点击节点查询当前的子节点和列表内容。

tree.vue页面，完整代码

<template>
<div class="home_box">
    <el-tree class="tree_item" :props="person.props" :load="loadNode" @node-click="clickNode" :highlight-current="true" lazy />
    <div class="right_box">
        <div class="mainShow">
            <div class="main_title">共有{{person.data.total}}个符合条件的课程</div>
            <div class="main_scroll">
                <div class="curriculumDiv" v-if="person.data.list.length>0">
                    <div class="main_item" v-for="(item,index) in person.data.list" :key="index">
                        <div class="video_img">
                            <img src="@/assets/img/videoBgImg.png" alt="">
                            <div class="play_icon">
                            <img src="@/assets/img/home/play_icon.png" alt="">
                            </div>
                        </div>
                        <div class="video_name">{{item.Name}}</div>
                    </div>
                </div>
                <el-empty v-else description="暂无录播数据" />
            </div>
        </div>
    </div>
</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import {getDicList,getRecordList} from "@/api/record";
let person: any = reactive ({
    props :{
        isLeaf: 'isLeaf',
    },
    activeId:0,
    //视频总条数
    total: 0,
    //录播列表
    data: {
      list: [],
      total: 0,
      pageSize: 9999,
      pageNumber: 1,
    }
})
// 左侧加载
const loadNode = async (node: any, resolve: (data:any) => void) => {
  if (node.level === 0) {
    let list = await GetDicList(0)
    GetRecordList()
    return resolve(list)
  }else if (node.level===1) {
    person.activeId = node.data.value
    GetRecordList()
    let list = await GetDicList(node.data.value)
    let newList = list.map((el:any) => {
        el.isLeaf = true
        return el
    })
    return resolve(newList)
  }else {
    return resolve([])
  }
}
// 节点单击
const clickNode =async (data: any,node: any) => {
    if (node.level === 2) {
        person.activeId = node.data.value
        GetRecordList()
    } else {
        person.activeId = 0
    }
}
// 获取章节接口
let GetDicList=async (id:number)=>{
    let res:any=await getDicList({ParentId:id})
    let {Code,Data}=res
    if(Code===200){
        let items= JSON.parse(JSON.stringify(Data).replace(/Id/g, 'value').replace(/Name/g, 'label'))
        return items
    }else{
        return []
    }
}
// 获取录播列表
let GetRecordList=async ()=>{
    let obj={
        NodeId: person.activeId,
        SchoolId: 0,
        GradeName: '',
        SubjectId: 0,
        PageIndex: person.data.pageNumber,
        PageSize: person.data.pageSize
    }
    let res:any=await getRecordList(obj)
    let {Code,Data}=res
    if(Code===200){
        person.data.list = Data.Data
        person.data.total = Data.Total
    }
}
</script>
<style lang="scss" scoped >
// 树状图
/deep/ .tree_item{
    width: 300px;
    padding: 18px;
    .el-tree-node__content{
        height: inherit;
        padding: 20px 25px;
        font-size: 18px;
        font-size: 500;
        color: #7E85A0;
        border-radius: 15px;
    }
    .el-tree-node.is-current > .el-tree-node__content {
        background: #F1F4FF;
        color: #6B86FF;
    }
    .el-tree-node__content .el-tree-node__label{
        font-size: 18px;
        font-weight: 500;
    }
    .el-tree-node__children{
        .el-tree-node{
            .el-tree-node__content {
                padding: 10px 0px;
                border-radius: 0px;
            }
            .el-tree-node__label{
                font-size: 15px;
            }
        }
    }
}
.home_box{
    width: 100%;
    display: flex;
    .right_box{
        padding: 30px;
        padding-bottom: 0px;
        width: 100%;
    }
    .mainShow{
        margin-top: 35px;
        .main_title{
            color: #7E85A0;
            font-size: 24px;
            font-weight: 500;
        }
        .main_scroll::-webkit-scrollbar{
            width: 0;
        }
        .main_scroll{
            height: 670px;
            overflow-y: scroll;
            margin: 20px 0;
            .el-empty{
                height: 90%;
            }
        }
        .curriculumDiv{
            display: flex;
            flex-wrap: wrap;
            padding: 5px;
            .main_item:hover{
                box-shadow: 0px 3px 10px rgba(107, 134, 255,.8);
            }
            .main_item{
                width: 23.4%;
                height: 323px;
                margin-bottom: 34px;
                background: #fff;
                margin-right: 33px;
                padding: 15px;
                cursor: pointer;
                border-radius: 30px;
                box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.05);
                overflow: hidden;
                position: relative;
                .video_img{
                    width: 100%;
                    height: 190px;
                    border-radius: 25px;
                    overflow: hidden;
                    position: relative;
                    img{
                        width: 100%;
                    }
                    .play_icon{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: rgba(0, 0, 0, 0.4);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        img{
                            width: 75px;
                            margin: 0 auto;
                        }
                    }
                }
                .video_name{
                    margin: 12px 0;
                    font-size: 18px;
                    line-height: 25px;
                    color: #4F4F4F;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                .video_status{
                    font-size: 16px;
                    color: #BDBDBD;
                }
                .video_start_status{
                    color: #FF7A17 !important;
                }
                .video_live{
                    position: absolute;
                    bottom: 5px;
                    right: 15px;
                    img{
                        width: 40px;
                    }
                }
            }
            .main_item:nth-child(4n){
                margin-right: 0px !important;
            }
        }
    }
}
</style>

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~