【vue3】实现筛选页组件(深层嵌套循环数据切换)的封装和调用

一、页面布局截图

1、首次进入该页面,默认选中初中项,并加载右侧初中相关的课程列表

2、筛选页(当点击初中项下的科目项,展示右侧筛选弹窗)

3、切换无内容项展示

图例1:无科目以及无课程列表的截图

 

图例2:有科目无右侧筛选弹窗内容截图

 二、筛选展示的数据结构如下(数据内容仅供参考)

let data=[
    {
        "Id": 48,
        "Name": "初中",
        "AliasName": "",
        "ParentId": 5,
        "CoverUrl": null,
        "Children": [
            {
                "Id": 50,
                "Name": "数学",
                "AliasName": "",
                "ParentId": 48,
                "CoverUrl": null,
                "Children": [
                    {
                        "Id": 134,
                        "Name": "版本",
                        "AliasName": "",
                        "ParentId": 50,
                        "CoverUrl": null,
                        "Children": [
                            {
                                "Id": 135,
                                "Name": "人教版",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": [
                                    {
                                        "Id": 141,
                                        "Name": "年级",
                                        "AliasName": "",
                                        "ParentId": 135,
                                        "CoverUrl": null,
                                        "Children": [
                                            {
                                                "Id": 142,
                                                "Name": "七年级上",
                                                "AliasName": "",
                                                "ParentId": 141,
                                                "CoverUrl": null,
                                                "Children": [
                                                    {
                                                        "Id": 148,
                                                        "Name": "每章",
                                                        "AliasName": "",
                                                        "ParentId": 142,
                                                        "CoverUrl": null,
                                                        "Children": [
                                                            {
                                                                "Id": 149,
                                                                "Name": "第一章",
                                                                "AliasName": "",
                                                                "ParentId": 148,
                                                                "CoverUrl": null,
                                                                "Children": [
                                                                    {
                                                                        "Id": 152,
                                                                        "Name": "每节",
                                                                        "AliasName": "",
                                                                        "ParentId": 149,
                                                                        "CoverUrl": null,
                                                                        "Children": [
                                                                            {
                                                                                "Id": 181,
                                                                                "Name": "第一节 函数、分数、负数",
                                                                                "AliasName": "",
                                                                                "ParentId": 152,
                                                                                "CoverUrl": null,
                                                                                "Children": null
                                                                            },
                                                                            {
                                                                                "Id": 182,
                                                                                "Name": "第二节 运算",
                                                                                "AliasName": "",
                                                                                "ParentId": 152,
                                                                                "CoverUrl": null,
                                                                                "Children": null
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "Id": 150,
                                                                "Name": "第二章",
                                                                "AliasName": "",
                                                                "ParentId": 148,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            },
                                                            {
                                                                "Id": 151,
                                                                "Name": "第三章",
                                                                "AliasName": "",
                                                                "ParentId": 148,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "Id": 143,
                                                "Name": "七年级下",
                                                "AliasName": "",
                                                "ParentId": 141,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 144,
                                                "Name": "八年级上",
                                                "AliasName": "",
                                                "ParentId": 141,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 145,
                                                "Name": "八年级下",
                                                "AliasName": "",
                                                "ParentId": 141,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 146,
                                                "Name": "九年级上",
                                                "AliasName": "",
                                                "ParentId": 141,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 147,
                                                "Name": "九年级下",
                                                "AliasName": "",
                                                "ParentId": 141,
                                                "CoverUrl": null,
                                                "Children": null
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "Id": 136,
                                "Name": "北师大版",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": [
                                    {
                                        "Id": 183,
                                        "Name": "年级",
                                        "AliasName": "",
                                        "ParentId": 136,
                                        "CoverUrl": null,
                                        "Children": [
                                            {
                                                "Id": 162,
                                                "Name": "七年级上册",
                                                "AliasName": "",
                                                "ParentId": 183,
                                                "CoverUrl": null,
                                                "Children": [
                                                    {
                                                        "Id": 168,
                                                        "Name": "每章",
                                                        "AliasName": "",
                                                        "ParentId": 162,
                                                        "CoverUrl": null,
                                                        "Children": [
                                                            {
                                                                "Id": 169,
                                                                "Name": "第一章 丰富的图形世界",
                                                                "AliasName": "",
                                                                "ParentId": 168,
                                                                "CoverUrl": null,
                                                                "Children": [
                                                                    {
                                                                        "Id": 176,
                                                                        "Name": "知识点",
                                                                        "AliasName": "",
                                                                        "ParentId": 169,
                                                                        "CoverUrl": null,
                                                                        "Children": [
                                                                            {
                                                                                "Id": 177,
                                                                                "Name": "生活中的立体图形",
                                                                                "AliasName": "",
                                                                                "ParentId": 176,
                                                                                "CoverUrl": null,
                                                                                "Children": null
                                                                            },
                                                                            {
                                                                                "Id": 178,
                                                                                "Name": "展开与折叠",
                                                                                "AliasName": "",
                                                                                "ParentId": 176,
                                                                                "CoverUrl": null,
                                                                                "Children": null
                                                                            }
                                                                        ]
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "Id": 170,
                                                                "Name": "第二章 有理数及其运算",
                                                                "AliasName": "",
                                                                "ParentId": 168,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            },
                                                            {
                                                                "Id": 171,
                                                                "Name": "第三章 整式及其加减",
                                                                "AliasName": "",
                                                                "ParentId": 168,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            },
                                                            {
                                                                "Id": 172,
                                                                "Name": "第四章 基本平面图形",
                                                                "AliasName": "",
                                                                "ParentId": 168,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            },
                                                            {
                                                                "Id": 173,
                                                                "Name": "第五章 一元一次方程",
                                                                "AliasName": "",
                                                                "ParentId": 168,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            },
                                                            {
                                                                "Id": 174,
                                                                "Name": "第六章 数据的收集与整理",
                                                                "AliasName": "",
                                                                "ParentId": 168,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            },
                                                            {
                                                                "Id": 175,
                                                                "Name": "综合复习与测试",
                                                                "AliasName": "",
                                                                "ParentId": 168,
                                                                "CoverUrl": null,
                                                                "Children": null
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "Id": 163,
                                                "Name": "七年级下册",
                                                "AliasName": "",
                                                "ParentId": 183,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 164,
                                                "Name": "八年级上册",
                                                "AliasName": "",
                                                "ParentId": 183,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 165,
                                                "Name": "八年级下册",
                                                "AliasName": "",
                                                "ParentId": 183,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 166,
                                                "Name": "九年级上册",
                                                "AliasName": "",
                                                "ParentId": 183,
                                                "CoverUrl": null,
                                                "Children": null
                                            },
                                            {
                                                "Id": 167,
                                                "Name": "九年级下册",
                                                "AliasName": "",
                                                "ParentId": 183,
                                                "CoverUrl": null,
                                                "Children": null
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "Id": 137,
                                "Name": "苏科版",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 138,
                                "Name": "沪科版(2012)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 139,
                                "Name": "华东师大版(2012)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 140,
                                "Name": "浙教版(2012)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 155,
                                "Name": "冀教版(2012)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 156,
                                "Name": "青岛版(2012)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 157,
                                "Name": "鲁教版(五四制)(2012)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 158,
                                "Name": "人教版(五四制)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 159,
                                "Name": "京改版",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 160,
                                "Name": "沪教版(上海)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            },
                            {
                                "Id": 161,
                                "Name": "湘教版(2012)",
                                "AliasName": "",
                                "ParentId": 134,
                                "CoverUrl": null,
                                "Children": null
                            }
                        ]
                    }
                ]
            },
            {
                "Id": 51,
                "Name": "语文",
                "AliasName": "",
                "ParentId": 48,
                "CoverUrl": null,
                "Children": null
            },
            {
                "Id": 52,
                "Name": "英语",
                "AliasName": "",
                "ParentId": 48,
                "CoverUrl": null,
                "Children": null
            },
            {
                "Id": 53,
                "Name": "物理",
                "AliasName": "",
                "ParentId": 48,
                "CoverUrl": null,
                "Children": null
            },
            {
                "Id": 54,
                "Name": "化学",
                "AliasName": "",
                "ParentId": 48,
                "CoverUrl": null,
                "Children": null
            },
            {
                "Id": 55,
                "Name": "生物",
                "AliasName": "",
                "ParentId": 48,
                "CoverUrl": null,
                "Children": null
            },
            {
                "Id": 56,
                "Name": "政治",
                "AliasName": "",
                "ParentId": 48,
                "CoverUrl": null,
                "Children": null
            }
        ]
    },
    {
        "Id": 49,
        "Name": "高中",
        "AliasName": "",
        "ParentId": 5,
        "CoverUrl": null,
        "Children": null
    }
]

三、组件的封装,以下三个vue页面文件组件,组合成了筛选页

1、分析

根据设计图需求以及数据结构的结合,返回的数据结构形成的深层嵌套循环与布局不符,其中Children下的数组,数组下的Children是不确定到底有多少层级的,因此

(1)如果直接循环渲染,页面是还原不了设计图的(无论多少层级,都要求左对齐)

(2)如果通过定位的方式布局,就直接写死了(行不通)

2、针对 问题(1) 采取的方法

(1)将右侧筛选弹窗的内容封装成小的组件 menuTree1.vue (也是最里层),如下图

menuTree1.vue

<template>
    <div class="r_item" :style="'width:100%;margin-left:' + (prs.index > 0 ? -prs.width : 0) + 'px'"
        v-for="(right,riIndex) in menuList" :key="riIndex">
        <div style="display:flex;" v-if="right.Children &&right.Children.length>0">
            <div class="r_item_title" :data-index="right.Id">{{ right.Name }}></div>
            <div class="r_nav" v-if="right.Children && right.Children.length > 0">
                <div class="r_nav_item" v-for="(chi, chiIndex) in right.Children" :key="chiIndex"
                :class="`${person.menuActive == chi.Id ? 'r_nav_item_active' : ''} ${right.Children.length === 1 ?'r_nav2':''}`"
                    @click="goPage(chi.Children, chi.Id, right.Id, chiIndex)">
                    {{ chi.Name }}
                </div>
                <menuTree v-if="person.isChild && person.isChild[0].ParentId == person.ClickId && right.Id == person.Pid"
                    :menuList="person.isChild" :width="person.width" :Id="person.ClickId" :index="1" @MenuTree1="MenuTree1">
                </menuTree>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import menuTree from './menuTree1.vue';
import { nextTick, onMounted, reactive, ref, toRaw } from 'vue';
let person: any = reactive({
    IsChild: [],
    ClickId: 0,
    Pid: 0,
    index: 0,
    width: 0,
    menuActive:-1,
    cwidth:0
})
type Menu = {
    Name: string,
    Children?: Menu[],
    ParentId: number,
    Id: number
}
const isChild = ref()
type Props = {
    menuList: Menu[],
    index: number,
    width:number,
    Id:number
}
var prop = defineProps<Props>()
let prs = toRaw(prop)

const emits = defineEmits(['MenuTree1']);

const goPage = (data: Menu[], Id: number, Pid: number,index:number) => {
    person.menuActive = Id
    person.isChild = data
    person.ClickId = Id
    person.Pid = Pid
    person.index = person.index + 1
    var a = document.getElementsByClassName('r_item_title')
    for (let index = 0; index < a.length; index++) {
        const element = a[index];
        var di = element.getAttribute('data-index')
        if (Number(di) === Pid) {
            // person.width = element.scrollWidth // + 15
            // 获取元素
            let secMargin = getComputedStyle(element);
            person.width = element.scrollWidth + parseFloat(secMargin.marginRight.replace('px', ''))
            break;
        }
    }
    emits('MenuTree1', Id);
};
const MenuTree1 = (Id: number) => {
    emits('MenuTree1', Id);
}
onMounted(()=>{
    nextTick(()=>{
        person.cwidth = document.body.scrollWidth
        window.onresize=()=>{
            var a = document.getElementsByClassName('r_item_title')[0]
            let secMargin = getComputedStyle(a);
            var w = a.scrollWidth + parseFloat(secMargin.marginRight.replace('px', ''))
            //获取所有的r_item 元素
            var r_item = document.getElementsByClassName('r_item')
            for (let index = 0; index < r_item.length; index++) {
                const element = r_item[index];
                //判断是否存在margin-left
                let elementSecMargin = getComputedStyle(element);

                var i = elementSecMargin.marginLeft.replace('px', '')
                if (parseInt(i)<0){
                    element.style.marginLeft = -w + "px"
                }
            }
        }
    })
})
</script>

(2)再将 menuTree1.vue 引入 封装的第二层组件 menuTree.vue 循环调用

menuTree.vue

<template>
    <div class="r_item" :style="'width:100%;'" v-for="(right,riIndex) in menuList" :key="riIndex">
        <div style="display:flex;">
            <div class="r_item_title" :data-index="right.Id">{{ right.Name }}></div>
            <div class="r_nav" v-if="right.Children && right.Children.length>0">
                <div class="r_nav_item" :class="person.menuActive == chi.Id ?'r_nav_item_active':''" v-for="(chi,chiIndex) in right.Children" :key="chiIndex" @click="goPage(chi.Children, chi.Id, right.Id, chiIndex)">
                    {{ chi.Name }}
                </div>
                <menuTree v-if="person.isChild && person.isChild[0].ParentId == person.ClickId && right.Id==person.Pid" :width="person.width" :menuList="person.isChild" :index="1"
                  :Id="0"  @MenuTree1="MenuTree1">
                </menuTree>
            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
import menuTree from './menuTree1.vue';
import { reactive, ref, toRaw } from 'vue';
let person: any = reactive({
    IsChild:[],
    ClickId:0,
    Pid:0,
    index:0,
    width:0,
    menuActive:-1
})
type Menu = {
    Name: string,
    Children?: Menu[],
    ParentId: number,
    Id: number
}
const isChild = ref()
type Props = {
    menuList: Menu[],
    index:number
}
var prop= defineProps<Props>()
let prs = toRaw(prop)

const emits = defineEmits(['MenuTree']);

const goPage = (data:Menu[],Id:number,Pid:number,index:number) => {
    person.menuActive = Id
    person.isChild=data
    person.ClickId=Id
    person.Pid=Pid
    person.index=person.index+1
    var a= document.getElementsByClassName('r_item_title')
    for (let index = 0; index < a.length; index++) {
        const element = a[index];
        var di = element.getAttribute('data-index')
        if (Number(di) === Pid) {
            // person.width = element.scrollWidth // + 15
            // 获取元素
            let secMargin = getComputedStyle(element);
            // console.log('获取值', secMargin.marginRight);
            person.width = element.scrollWidth +parseFloat(secMargin.marginRight.replace('px',''))
            break;
        }
    }
    MenuTree1(person.ClickId)
};
// // 获取里层的方法
const MenuTree1 =(item:any)=>{
    emits('MenuTree', item);
}
</script>

(3)再将 menuTree.vue 引入 封装的第一层组件 index.vue 调用,如下图

index.vue

/**
*@Author: meihang
*@Date: 2022/10/26
*@Description: 录播筛选组件
*/
<template>
    <div class="screen_page" v-if="person.gradeList && person.gradeList.length>0">
        <div class="screen_l">
            <!-- 年级 -->
            <div class="l_nav">
                <div class="l_nav_item" :class="[person.gradeActive===grIndex?'l_nav_item_active':'']" v-for="(grade,grIndex) in person.gradeList" :key="grIndex" @click="gradeChange(grade, grIndex)">
                    {{ grade.Name }}
                </div>
            </div>
            <!-- 科目 -->
            <div class="l_nav_panel" v-if="person.gradeList[person.gradeActive].Children && person.gradeList[person.gradeActive].Children.length > 0">
                <div class="panel_item" :class="[person.subjectActive === chiIndex ?'panel_item_active':'']" v-for="(chi,chiIndex) in person.gradeList[person.gradeActive].Children" :key="chiIndex" @click="subjectChange(chi, chiIndex)">
                  <span>{{ chi.Name }}</span>
                  <i class="el-icon-caret-right"></i>
                </div>
            </div>
            <div v-else class="null_box">
                <p>暂无科目</p>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="screen_r" v-if="person.isShowRight">
            <div class="r_item_socrll" v-if="person.rightList && person.rightList.length>0">
                <div class="r_item_box">
                   <menuTree :menuList="person.rightList" @MenuTree="MenuTree" ></menuTree>
                </div>
            </div>
            <div v-else class="null_box">
                <p>暂无筛选数据</p>
            </div>
            <div class="r_btn">
                <el-button @click="okClick">确定</el-button>
                <el-button @click="cancelClick">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, defineExpose, toRaw, ref } from 'vue'
import  menuTree from './menuTree.vue';
let person: any = reactive({
    gradeList:[], // 年级及以下列表
    gradeActive: 0, // 年级筛选
    subjectActive: -1, // 科目筛选
    isShowRight:false, // 是否显示右侧
    rightList: [], // 右侧一级列表
    rightId:0,
    lastId:0
})

type TleftData={
    AliasName: string,
    Children: Array<TleftData>
    CoverUrl: string
    Id: string
    Name: string
}

type TProps = {
    leftData: Array<TleftData>
}
let prop = defineProps<TProps>()
let prs = toRaw(prop)
person.gradeList = prs.leftData

const emit = defineEmits(['gradeMenu', 'okMenu'])

// 年级切换
const gradeChange=(item:any,index:number)=>{
    person.gradeActive = index
    emit('gradeMenu', item)
}
// 科目切换
const subjectChange = (item: any, index: number) => {
    person.subjectActive = index
    person.isShowRight=true

    if (item.Children && item.Children.length > 0){
        person.rightList = item.Children
        person.rightId=item.Id
    }else{
        person.rightList = []
    }
}
const MenuTree = (Id: number) => {
    console.log('点击完成后', Id)
    person.lastId = Id
};

// 确认筛选
const okClick=()=>{
    person.isShowRight = false
    let selectId = 0
    const gradeId = person.gradeList[person.gradeActive].Id
    const subjectId = person.gradeList[person.gradeActive].Children[person.subjectActive] && person.gradeList[person.gradeActive].Children[person.subjectActive].Id
    if (person.lastId>0){
        selectId = person.lastId
    } else if (subjectId>0){
        selectId = subjectId
    } else if (gradeId > 0) {
        selectId = gradeId
    }
    emit('okMenu', selectId)
    person.lastId = 0
}
// 取消筛选
const cancelClick = () => {
    person.isShowRight = false
}
</script>
<style lang="scss">
.r_nav {
    display: flex;
    flex-wrap: wrap;
    color: #737272;
    font-size: 16px;

    .r_nav_item {
        margin-right: 20px;
        margin-bottom: 10px;
    }

    .r_nav_item_active {
        color: #5182FF;
    }
}

.r_nav1 {
    white-space: normal !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    color: #737272;
    height: auto !important;

    .r_nav_item1 {
        margin-right: 20px;
        margin-bottom: 15px;
    }

    .r_nav_item1_active {
        color: #5182FF;
        border: 1px solid #5182FF;
    }
}

.r_nav2{
    max-width: 450px;
    min-width: 350px;
}
.r_item {
    padding: 15px 0;
    .r_item_title {
        font-weight: 500;
        margin-right: 15px;
        color: #000;
        font-size: 16px;
    }
}
</style>
<style lang="scss" scoped >
.screen_page {
    width: 1200px;
    height: calc(100vh - 200px);
    display: flex;
    position: relative;
    .screen_l{
        width: 257px;
        padding: 15px;
        font-size: 16px;
        color: #6D6D6D;
        background: #fff;
        .l_nav{
            display: flex;
            justify-content: space-between;
            .l_nav_item{
                padding: 5px 0px;
                border: 1px solid #5182FF;
                border-radius: 4px;
                color: #5182FF;
                width: 50%;
                text-align: center;
                margin-right: 10px;
            }
            .l_nav_item:last-child{
                margin-right: 2px;
            }
            .l_nav_item_active{
                color: #fff !important;
                background: #5182FF !important;
            }
        }
        .l_nav_panel::-webkit-scrollbar {
            width: 4px;
        }
        .l_nav_panel::-webkit-scrollbar-thumb{
            background: #eee;
            border-radius: 10px;
        }
        .l_nav_panel{
            margin-top: 15px;
            height: calc(100vh - 290px);
            overflow-y: scroll;
            .panel_item{
                border-radius: 4px;
                padding: 10px 5px 10px 10px;
                display: flex;
                justify-content: space-between;
                i{
                    color: #D9E4FF;
                    font-size: 20px;
                }
            }
            .panel_item_active{
                background: rgba(81, 130, 255, 0.15);
                color: #5182FF;
                i {
                    color: #5182FF;
                }
            }
        }
    }
    .screen_r{
        border-left: 1px solid #D7D7D7;
        white-space: nowrap;
        width: calc(100% - 257px);
        z-index: 100000;
        background: #fff;
        padding: 20px 60px 20px 30px;
        position: relative;
        .r_item_socrll::-webkit-scrollbar{
            width: 0;
        }
        .r_item_socrll{
            border-bottom: 1px solid #EAEAEA;
            height: calc(100% - 80px);
            overflow-y: scroll;
            .r_item_box {
                border-bottom: 1px solid #EAEAEA;
            }
            .r_item_box:last-child {
                border:0;
            }
            .r_item:last-child{
                border: 0;
            }
        }
        .r_btn{
            position: absolute;
            bottom: 40px;
            right: 90px;
            .el-button{
                min-height: inherit;
                padding: 9px 32px;
            }
            .el-button:first-child{
                background: #5182FF;
                color: #fff;
            }
            .el-button:nth-child(2) {
                border: 1px solid #5182FF;
                color:#5182FF;
            }
        }
    }
}
</style>

四、课程列表页中的调用


// 页面使用
<template>
  <div>
      <Screen @gradeMenu="gradeMenu" @okMenu="okMenu" v-if="person.menuList && person.menuList.length > 0" :leftData="person.menuList"></Screen>
  </div>
</template>

// 引入组件
<script lang="ts" setup>
import Screen from "@/components/Screen/index.vue";

// 年级切换
const gradeMenu = (item: any) => {
    // 获取传递过来的Id
    console.log(item.Id)
}
// 确认筛选
const okMenu = (lastId: number) => {
    // 获取筛选后点击确认传递过来的Id
    console.log(lastId)
}
</script>

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


版权声明:本文为weixin_50450473原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>