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

    一、页面布局截图

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

    2、筛选页（当点击初中项下的科目项，展示右侧筛选弹窗）

    3、切换无内容项展示

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

     

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

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

    1. let data=[
    2.     {
    3.         "Id": 48,
    4.         "Name": "初中",
    5.         "AliasName": "",
    6.         "ParentId": 5,
    7.         "CoverUrl": null,
    8.         "Children": [
    9.             {
    10.                 "Id": 50,
    11.                 "Name": "数学",
    12.                 "AliasName": "",
    13.                 "ParentId": 48,
    14.                 "CoverUrl": null,
    15.                 "Children": [
    16.                     {
    17.                         "Id": 134,
    18.                         "Name": "版本",
    19.                         "AliasName": "",
    20.                         "ParentId": 50,
    21.                         "CoverUrl": null,
    22.                         "Children": [
    23.                             {
    24.                                 "Id": 135,
    25.                                 "Name": "人教版",
    26.                                 "AliasName": "",
    27.                                 "ParentId": 134,
    28.                                 "CoverUrl": null,
    29.                                 "Children": [
    30.                                     {
    31.                                         "Id": 141,
    32.                                         "Name": "年级",
    33.                                         "AliasName": "",
    34.                                         "ParentId": 135,
    35.                                         "CoverUrl": null,
    36.                                         "Children": [
    37.                                             {
    38.                                                 "Id": 142,
    39.                                                 "Name": "七年级上",
    40.                                                 "AliasName": "",
    41.                                                 "ParentId": 141,
    42.                                                 "CoverUrl": null,
    43.                                                 "Children": [
    44.                                                     {
    45.                                                         "Id": 148,
    46.                                                         "Name": "每章",
    47.                                                         "AliasName": "",
    48.                                                         "ParentId": 142,
    49.                                                         "CoverUrl": null,
    50.                                                         "Children": [
    51.                                                             {
    52.                                                                 "Id": 149,
    53.                                                                 "Name": "第一章",
    54.                                                                 "AliasName": "",
    55.                                                                 "ParentId": 148,
    56.                                                                 "CoverUrl": null,
    57.                                                                 "Children": [
    58.                                                                     {
    59.                                                                         "Id": 152,
    60.                                                                         "Name": "每节",
    61.                                                                         "AliasName": "",
    62.                                                                         "ParentId": 149,
    63.                                                                         "CoverUrl": null,
    64.                                                                         "Children": [
    65.                                                                             {
    66.                                                                                 "Id": 181,
    67.                                                                                 "Name": "第一节 函数、分数、负数",
    68.                                                                                 "AliasName": "",
    69.                                                                                 "ParentId": 152,
    70.                                                                                 "CoverUrl": null,
    71.                                                                                 "Children": null
    72.                                                                             },
    73.                                                                             {
    74.                                                                                 "Id": 182,
    75.                                                                                 "Name": "第二节 运算",
    76.                                                                                 "AliasName": "",
    77.                                                                                 "ParentId": 152,
    78.                                                                                 "CoverUrl": null,
    79.                                                                                 "Children": null
    80.                                                                             }
    81.                                                                         ]
    82.                                                                     }
    83.                                                                 ]
    84.                                                             },
    85.                                                             {
    86.                                                                 "Id": 150,
    87.                                                                 "Name": "第二章",
    88.                                                                 "AliasName": "",
    89.                                                                 "ParentId": 148,
    90.                                                                 "CoverUrl": null,
    91.                                                                 "Children": null
    92.                                                             },
    93.                                                             {
    94.                                                                 "Id": 151,
    95.                                                                 "Name": "第三章",
    96.                                                                 "AliasName": "",
    97.                                                                 "ParentId": 148,
    98.                                                                 "CoverUrl": null,
    99.                                                                 "Children": null
    100.                                                             }
    101.                                                         ]
    102.                                                     }
    103.                                                 ]
    104.                                             },
    105.                                             {
    106.                                                 "Id": 143,
    107.                                                 "Name": "七年级下",
    108.                                                 "AliasName": "",
    109.                                                 "ParentId": 141,
    110.                                                 "CoverUrl": null,
    111.                                                 "Children": null
    112.                                             },
    113.                                             {
    114.                                                 "Id": 144,
    115.                                                 "Name": "八年级上",
    116.                                                 "AliasName": "",
    117.                                                 "ParentId": 141,
    118.                                                 "CoverUrl": null,
    119.                                                 "Children": null
    120.                                             },
    121.                                             {
    122.                                                 "Id": 145,
    123.                                                 "Name": "八年级下",
    124.                                                 "AliasName": "",
    125.                                                 "ParentId": 141,
    126.                                                 "CoverUrl": null,
    127.                                                 "Children": null
    128.                                             },
    129.                                             {
    130.                                                 "Id": 146,
    131.                                                 "Name": "九年级上",
    132.                                                 "AliasName": "",
    133.                                                 "ParentId": 141,
    134.                                                 "CoverUrl": null,
    135.                                                 "Children": null
    136.                                             },
    137.                                             {
    138.                                                 "Id": 147,
    139.                                                 "Name": "九年级下",
    140.                                                 "AliasName": "",
    141.                                                 "ParentId": 141,
    142.                                                 "CoverUrl": null,
    143.                                                 "Children": null
    144.                                             }
    145.                                         ]
    146.                                     }
    147.                                 ]
    148.                             },
    149.                             {
    150.                                 "Id": 136,
    151.                                 "Name": "北师大版",
    152.                                 "AliasName": "",
    153.                                 "ParentId": 134,
    154.                                 "CoverUrl": null,
    155.                                 "Children": [
    156.                                     {
    157.                                         "Id": 183,
    158.                                         "Name": "年级",
    159.                                         "AliasName": "",
    160.                                         "ParentId": 136,
    161.                                         "CoverUrl": null,
    162.                                         "Children": [
    163.                                             {
    164.                                                 "Id": 162,
    165.                                                 "Name": "七年级上册",
    166.                                                 "AliasName": "",
    167.                                                 "ParentId": 183,
    168.                                                 "CoverUrl": null,
    169.                                                 "Children": [
    170.                                                     {
    171.                                                         "Id": 168,
    172.                                                         "Name": "每章",
    173.                                                         "AliasName": "",
    174.                                                         "ParentId": 162,
    175.                                                         "CoverUrl": null,
    176.                                                         "Children": [
    177.                                                             {
    178.                                                                 "Id": 169,
    179.                                                                 "Name": "第一章 丰富的图形世界",
    180.                                                                 "AliasName": "",
    181.                                                                 "ParentId": 168,
    182.                                                                 "CoverUrl": null,
    183.                                                                 "Children": [
    184.                                                                     {
    185.                                                                         "Id": 176,
    186.                                                                         "Name": "知识点",
    187.                                                                         "AliasName": "",
    188.                                                                         "ParentId": 169,
    189.                                                                         "CoverUrl": null,
    190.                                                                         "Children": [
    191.                                                                             {
    192.                                                                                 "Id": 177,
    193.                                                                                 "Name": "生活中的立体图形",
    194.                                                                                 "AliasName": "",
    195.                                                                                 "ParentId": 176,
    196.                                                                                 "CoverUrl": null,
    197.                                                                                 "Children": null
    198.                                                                             },
    199.                                                                             {
    200.                                                                                 "Id": 178,
    201.                                                                                 "Name": "展开与折叠",
    202.                                                                                 "AliasName": "",
    203.                                                                                 "ParentId": 176,
    204.                                                                                 "CoverUrl": null,
    205.                                                                                 "Children": null
    206.                                                                             }
    207.                                                                         ]
    208.                                                                     }
    209.                                                                 ]
    210.                                                             },
    211.                                                             {
    212.                                                                 "Id": 170,
    213.                                                                 "Name": "第二章 有理数及其运算",
    214.                                                                 "AliasName": "",
    215.                                                                 "ParentId": 168,
    216.                                                                 "CoverUrl": null,
    217.                                                                 "Children": null
    218.                                                             },
    219.                                                             {
    220.                                                                 "Id": 171,
    221.                                                                 "Name": "第三章 整式及其加减",
    222.                                                                 "AliasName": "",
    223.                                                                 "ParentId": 168,
    224.                                                                 "CoverUrl": null,
    225.                                                                 "Children": null
    226.                                                             },
    227.                                                             {
    228.                                                                 "Id": 172,
    229.                                                                 "Name": "第四章 基本平面图形",
    230.                                                                 "AliasName": "",
    231.                                                                 "ParentId": 168,
    232.                                                                 "CoverUrl": null,
    233.                                                                 "Children": null
    234.                                                             },
    235.                                                             {
    236.                                                                 "Id": 173,
    237.                                                                 "Name": "第五章 一元一次方程",
    238.                                                                 "AliasName": "",
    239.                                                                 "ParentId": 168,
    240.                                                                 "CoverUrl": null,
    241.                                                                 "Children": null
    242.                                                             },
    243.                                                             {
    244.                                                                 "Id": 174,
    245.                                                                 "Name": "第六章 数据的收集与整理",
    246.                                                                 "AliasName": "",
    247.                                                                 "ParentId": 168,
    248.                                                                 "CoverUrl": null,
    249.                                                                 "Children": null
    250.                                                             },
    251.                                                             {
    252.                                                                 "Id": 175,
    253.                                                                 "Name": "综合复习与测试",
    254.                                                                 "AliasName": "",
    255.                                                                 "ParentId": 168,
    256.                                                                 "CoverUrl": null,
    257.                                                                 "Children": null
    258.                                                             }
    259.                                                         ]
    260.                                                     }
    261.                                                 ]
    262.                                             },
    263.                                             {
    264.                                                 "Id": 163,
    265.                                                 "Name": "七年级下册",
    266.                                                 "AliasName": "",
    267.                                                 "ParentId": 183,
    268.                                                 "CoverUrl": null,
    269.                                                 "Children": null
    270.                                             },
    271.                                             {
    272.                                                 "Id": 164,
    273.                                                 "Name": "八年级上册",
    274.                                                 "AliasName": "",
    275.                                                 "ParentId": 183,
    276.                                                 "CoverUrl": null,
    277.                                                 "Children": null
    278.                                             },
    279.                                             {
    280.                                                 "Id": 165,
    281.                                                 "Name": "八年级下册",
    282.                                                 "AliasName": "",
    283.                                                 "ParentId": 183,
    284.                                                 "CoverUrl": null,
    285.                                                 "Children": null
    286.                                             },
    287.                                             {
    288.                                                 "Id": 166,
    289.                                                 "Name": "九年级上册",
    290.                                                 "AliasName": "",
    291.                                                 "ParentId": 183,
    292.                                                 "CoverUrl": null,
    293.                                                 "Children": null
    294.                                             },
    295.                                             {
    296.                                                 "Id": 167,
    297.                                                 "Name": "九年级下册",
    298.                                                 "AliasName": "",
    299.                                                 "ParentId": 183,
    300.                                                 "CoverUrl": null,
    301.                                                 "Children": null
    302.                                             }
    303.                                         ]
    304.                                     }
    305.                                 ]
    306.                             },
    307.                             {
    308.                                 "Id": 137,
    309.                                 "Name": "苏科版",
    310.                                 "AliasName": "",
    311.                                 "ParentId": 134,
    312.                                 "CoverUrl": null,
    313.                                 "Children": null
    314.                             },
    315.                             {
    316.                                 "Id": 138,
    317.                                 "Name": "沪科版（2012）",
    318.                                 "AliasName": "",
    319.                                 "ParentId": 134,
    320.                                 "CoverUrl": null,
    321.                                 "Children": null
    322.                             },
    323.                             {
    324.                                 "Id": 139,
    325.                                 "Name": "华东师大版（2012）",
    326.                                 "AliasName": "",
    327.                                 "ParentId": 134,
    328.                                 "CoverUrl": null,
    329.                                 "Children": null
    330.                             },
    331.                             {
    332.                                 "Id": 140,
    333.                                 "Name": "浙教版（2012）",
    334.                                 "AliasName": "",
    335.                                 "ParentId": 134,
    336.                                 "CoverUrl": null,
    337.                                 "Children": null
    338.                             },
    339.                             {
    340.                                 "Id": 155,
    341.                                 "Name": "冀教版（2012）",
    342.                                 "AliasName": "",
    343.                                 "ParentId": 134,
    344.                                 "CoverUrl": null,
    345.                                 "Children": null
    346.                             },
    347.                             {
    348.                                 "Id": 156,
    349.                                 "Name": "青岛版（2012）",
    350.                                 "AliasName": "",
    351.                                 "ParentId": 134,
    352.                                 "CoverUrl": null,
    353.                                 "Children": null
    354.                             },
    355.                             {
    356.                                 "Id": 157,
    357.                                 "Name": "鲁教版（五四制）（2012）",
    358.                                 "AliasName": "",
    359.                                 "ParentId": 134,
    360.                                 "CoverUrl": null,
    361.                                 "Children": null
    362.                             },
    363.                             {
    364.                                 "Id": 158,
    365.                                 "Name": "人教版（五四制）",
    366.                                 "AliasName": "",
    367.                                 "ParentId": 134,
    368.                                 "CoverUrl": null,
    369.                                 "Children": null
    370.                             },
    371.                             {
    372.                                 "Id": 159,
    373.                                 "Name": "京改版",
    374.                                 "AliasName": "",
    375.                                 "ParentId": 134,
    376.                                 "CoverUrl": null,
    377.                                 "Children": null
    378.                             },
    379.                             {
    380.                                 "Id": 160,
    381.                                 "Name": "沪教版（上海）",
    382.                                 "AliasName": "",
    383.                                 "ParentId": 134,
    384.                                 "CoverUrl": null,
    385.                                 "Children": null
    386.                             },
    387.                             {
    388.                                 "Id": 161,
    389.                                 "Name": "湘教版（2012）",
    390.                                 "AliasName": "",
    391.                                 "ParentId": 134,
    392.                                 "CoverUrl": null,
    393.                                 "Children": null
    394.                             }
    395.                         ]
    396.                     }
    397.                 ]
    398.             },
    399.             {
    400.                 "Id": 51,
    401.                 "Name": "语文",
    402.                 "AliasName": "",
    403.                 "ParentId": 48,
    404.                 "CoverUrl": null,
    405.                 "Children": null
    406.             },
    407.             {
    408.                 "Id": 52,
    409.                 "Name": "英语",
    410.                 "AliasName": "",
    411.                 "ParentId": 48,
    412.                 "CoverUrl": null,
    413.                 "Children": null
    414.             },
    415.             {
    416.                 "Id": 53,
    417.                 "Name": "物理",
    418.                 "AliasName": "",
    419.                 "ParentId": 48,
    420.                 "CoverUrl": null,
    421.                 "Children": null
    422.             },
    423.             {
    424.                 "Id": 54,
    425.                 "Name": "化学",
    426.                 "AliasName": "",
    427.                 "ParentId": 48,
    428.                 "CoverUrl": null,
    429.                 "Children": null
    430.             },
    431.             {
    432.                 "Id": 55,
    433.                 "Name": "生物",
    434.                 "AliasName": "",
    435.                 "ParentId": 48,
    436.                 "CoverUrl": null,
    437.                 "Children": null
    438.             },
    439.             {
    440.                 "Id": 56,
    441.                 "Name": "政治",
    442.                 "AliasName": "",
    443.                 "ParentId": 48,
    444.                 "CoverUrl": null,
    445.                 "Children": null
    446.             }
    447.         ]
    448.     },
    449.     {
    450.         "Id": 49,
    451.         "Name": "高中",
    452.         "AliasName": "",
    453.         "ParentId": 5,
    454.         "CoverUrl": null,
    455.         "Children": null
    456.     }
    457. ]

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

    1、分析

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

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

    （2）如果通过定位的方式布局，就直接写死了（行不通）

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

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

    menuTree1.vue

    1. <template>
    2.     <div class="r_item" :style="'width:100%;margin-left:' + (prs.index > 0 ? -prs.width : 0) + 'px'"
    3.         v-for="(right,riIndex) in menuList" :key="riIndex">
    4.         <div style="display:flex;" v-if="right.Children &&right.Children.length>0">
    5.             <div class="r_item_title" :data-index="right.Id">{{ right.Name }}></div>
    6.             <div class="r_nav" v-if="right.Children && right.Children.length > 0">
    7.                 <div class="r_nav_item" v-for="(chi, chiIndex) in right.Children" :key="chiIndex"
    8.                 :class="`${person.menuActive == chi.Id ? 'r_nav_item_active' : ''} ${right.Children.length === 1 ?'r_nav2':''}`"
    9.                     @click="goPage(chi.Children, chi.Id, right.Id, chiIndex)">
    10.                     {{ chi.Name }}
    11.                 </div>
    12.                 <menuTree v-if="person.isChild && person.isChild[0].ParentId == person.ClickId && right.Id == person.Pid"
    13.                     :menuList="person.isChild" :width="person.width" :Id="person.ClickId" :index="1" @MenuTree1="MenuTree1">
    14.                 </menuTree>
    15.             </div>
    16.         </div>
    17.     </div>
    18. </template>
    19. <script setup lang="ts">
    20. import menuTree from './menuTree1.vue';
    21. import { nextTick, onMounted, reactive, ref, toRaw } from 'vue';
    22. let person: any = reactive({
    23.     IsChild: [],
    24.     ClickId: 0,
    25.     Pid: 0,
    26.     index: 0,
    27.     width: 0,
    28.     menuActive:-1,
    29.     cwidth:0
    30. })
    31. type Menu = {
    32.     Name: string,
    33.     Children?: Menu[],
    34.     ParentId: number,
    35.     Id: number
    36. }
    37. const isChild = ref()
    38. type Props = {
    39.     menuList: Menu[],
    40.     index: number,
    41.     width:number,
    42.     Id:number
    43. }
    44. var prop = defineProps<Props>()
    45. let prs = toRaw(prop)
    46.  
    47. const emits = defineEmits(['MenuTree1']);
    48.  
    49. const goPage = (data: Menu[], Id: number, Pid: number,index:number) => {
    50.     person.menuActive = Id
    51.     person.isChild = data
    52.     person.ClickId = Id
    53.     person.Pid = Pid
    54.     person.index = person.index + 1
    55.     var a = document.getElementsByClassName('r_item_title')
    56.     for (let index = 0; index < a.length; index++) {
    57.         const element = a[index];
    58.         var di = element.getAttribute('data-index')
    59.         if (Number(di) === Pid) {
    60.             // person.width = element.scrollWidth // + 15
    61.             // 获取元素
    62.             let secMargin = getComputedStyle(element);
    63.             person.width = element.scrollWidth + parseFloat(secMargin.marginRight.replace('px', ''))
    64.             break;
    65.         }
    66.     }
    67.     emits('MenuTree1', Id);
    68. };
    69. const MenuTree1 = (Id: number) => {
    70.     emits('MenuTree1', Id);
    71. }
    72. onMounted(()=>{
    73.     nextTick(()=>{
    74.         person.cwidth = document.body.scrollWidth
    75.         window.onresize=()=>{
    76.             var a = document.getElementsByClassName('r_item_title')[0]
    77.             let secMargin = getComputedStyle(a);
    78.             var w = a.scrollWidth + parseFloat(secMargin.marginRight.replace('px', ''))
    79.             //获取所有的r_item 元素
    80.             var r_item = document.getElementsByClassName('r_item')
    81.             for (let index = 0; index < r_item.length; index++) {
    82.                 const element = r_item[index];
    83.                 //判断是否存在margin-left
    84.                 let elementSecMargin = getComputedStyle(element);
    85.  
    86.                 var i = elementSecMargin.marginLeft.replace('px', '')
    87.                 if (parseInt(i)<0){
    88.                     element.style.marginLeft = -w + "px"
    89.                 }
    90.             }
    91.         }
    92.     })
    93. })
    94. </script>

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

    menuTree.vue

    1. <template>
    2.     <div class="r_item" :style="'width:100%;'" v-for="(right,riIndex) in menuList" :key="riIndex">
    3.         <div style="display:flex;">
    4.             <div class="r_item_title" :data-index="right.Id">{{ right.Name }}></div>
    5.             <div class="r_nav" v-if="right.Children && right.Children.length>0">
    6.                 <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)">
    7.                     {{ chi.Name }}
    8.                 </div>
    9.                 <menuTree v-if="person.isChild && person.isChild[0].ParentId == person.ClickId && right.Id==person.Pid" :width="person.width" :menuList="person.isChild" :index="1"
    10.                   :Id="0"  @MenuTree1="MenuTree1">
    11.                 </menuTree>
    12.             </div>
    13.         </div>
    14.     </div>
    15.  
    16. </template>
    17. <script setup lang="ts">
    18. import menuTree from './menuTree1.vue';
    19. import { reactive, ref, toRaw } from 'vue';
    20. let person: any = reactive({
    21.     IsChild:[],
    22.     ClickId:0,
    23.     Pid:0,
    24.     index:0,
    25.     width:0,
    26.     menuActive:-1
    27. })
    28. type Menu = {
    29.     Name: string,
    30.     Children?: Menu[],
    31.     ParentId: number,
    32.     Id: number
    33. }
    34. const isChild = ref()
    35. type Props = {
    36.     menuList: Menu[],
    37.     index:number
    38. }
    39. var prop= defineProps<Props>()
    40. let prs = toRaw(prop)
    41.  
    42. const emits = defineEmits(['MenuTree']);
    43.  
    44. const goPage = (data:Menu[],Id:number,Pid:number,index:number) => {
    45.     person.menuActive = Id
    46.     person.isChild=data
    47.     person.ClickId=Id
    48.     person.Pid=Pid
    49.     person.index=person.index+1
    50.     var a= document.getElementsByClassName('r_item_title')
    51.     for (let index = 0; index < a.length; index++) {
    52.         const element = a[index];
    53.         var di = element.getAttribute('data-index')
    54.         if (Number(di) === Pid) {
    55.             // person.width = element.scrollWidth // + 15
    56.             // 获取元素
    57.             let secMargin = getComputedStyle(element);
    58.             // console.log('获取值', secMargin.marginRight);
    59.             person.width = element.scrollWidth +parseFloat(secMargin.marginRight.replace('px',''))
    60.             break;
    61.         }
    62.     }
    63.     MenuTree1(person.ClickId)
    64. };
    65. // // 获取里层的方法
    66. const MenuTree1 =(item:any)=>{
    67.     emits('MenuTree', item);
    68. }
    69. </script>

    （3）再将 menuTree.vue 引入 封装的第一层组件 index.vue 调用，如下图

    index.vue

    1. <template>
    2.     <div class="screen_page" v-if="person.gradeList && person.gradeList.length>0">
    3.         <div class="screen_l">
    4.             <!-- 年级 -->
    5.             <div class="l_nav">
    6.                 <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)">
    7.                     {{ grade.Name }}
    8.                 </div>
    9.             </div>
    10.             <!-- 科目 -->
    11.             <div class="l_nav_panel" v-if="person.gradeList[person.gradeActive].Children && person.gradeList[person.gradeActive].Children.length > 0">
    12.                 <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)">
    13.                   <span>{{ chi.Name }}</span>
    14.                   <i class="el-icon-caret-right"></i>
    15.                 </div>
    16.             </div>
    17.             <div v-else class="null_box">
    18.                 <p>暂无科目</p>
    19.             </div>
    20.         </div>
    21.         <!-- 右侧 -->
    22.         <div class="screen_r" v-if="person.isShowRight">
    23.             <div class="r_item_socrll" v-if="person.rightList && person.rightList.length>0">
    24.                 <div class="r_item_box">
    25.                    <menuTree :menuList="person.rightList" @MenuTree="MenuTree" ></menuTree>
    26.                 </div>
    27.             </div>
    28.             <div v-else class="null_box">
    29.                 <p>暂无筛选数据</p>
    30.             </div>
    31.             <div class="r_btn">
    32.                 <el-button @click="okClick">确定</el-button>
    33.                 <el-button @click="cancelClick">取消</el-button>
    34.             </div>
    35.         </div>
    36.     </div>
    37. </template>
    38. <script lang="ts" setup>
    39. import { reactive, defineExpose, toRaw, ref } from 'vue'
    40. import  menuTree from './menuTree.vue';
    41. let person: any = reactive({
    42.     gradeList:[], // 年级及以下列表
    43.     gradeActive: 0, // 年级筛选
    44.     subjectActive: -1, // 科目筛选
    45.     isShowRight:false, // 是否显示右侧
    46.     rightList: [], // 右侧一级列表
    47.     rightId:0,
    48.     lastId:0
    49. })
    50.  
    51. type TleftData={
    52.     AliasName: string,
    53.     Children: Array<TleftData>
    54.     CoverUrl: string
    55.     Id: string
    56.     Name: string
    57. }
    58.  
    59. type TProps = {
    60.     leftData: Array<TleftData>
    61. }
    62. let prop = defineProps<TProps>()
    63. let prs = toRaw(prop)
    64. person.gradeList = prs.leftData
    65.  
    66. const emit = defineEmits(['gradeMenu', 'okMenu'])
    67.  
    68. // 年级切换
    69. const gradeChange=(item:any,index:number)=>{
    70.     person.gradeActive = index
    71.     emit('gradeMenu', item)
    72. }
    73. // 科目切换
    74. const subjectChange = (item: any, index: number) => {
    75.     person.subjectActive = index
    76.     person.isShowRight=true
    77.  
    78.     if (item.Children && item.Children.length > 0){
    79.         person.rightList = item.Children
    80.         person.rightId=item.Id
    81.     }else{
    82.         person.rightList = []
    83.     }
    84. }
    85. const MenuTree = (Id: number) => {
    86.     console.log('点击完成后', Id)
    87.     person.lastId = Id
    88. };
    89.  
    90. // 确认筛选
    91. const okClick=()=>{
    92.     person.isShowRight = false
    93.     let selectId = 0
    94.     const gradeId = person.gradeList[person.gradeActive].Id
    95.     const subjectId = person.gradeList[person.gradeActive].Children[person.subjectActive] && person.gradeList[person.gradeActive].Children[person.subjectActive].Id
    96.     if (person.lastId>0){
    97.         selectId = person.lastId
    98.     } else if (subjectId>0){
    99.         selectId = subjectId
    100.     } else if (gradeId > 0) {
    101.         selectId = gradeId
    102.     }
    103.     emit('okMenu', selectId)
    104.     person.lastId = 0
    105. }
    106. // 取消筛选
    107. const cancelClick = () => {
    108.     person.isShowRight = false
    109. }
    110. </script>
    111. <style lang="scss">
    112. .r_nav {
    113.     display: flex;
    114.     flex-wrap: wrap;
    115.     color: #737272;
    116.     font-size: 16px;
    117.  
    118.     .r_nav_item {
    119.         margin-right: 20px;
    120.         margin-bottom: 10px;
    121.     }
    122.  
    123.     .r_nav_item_active {
    124.         color: #5182FF;
    125.     }
    126. }
    127.  
    128. .r_nav1 {
    129.     white-space: normal !important;
    130.     display: flex;
    131.     flex-wrap: wrap;
    132.     justify-content: start;
    133.     color: #737272;
    134.     height: auto !important;
    135.  
    136.     .r_nav_item1 {
    137.         margin-right: 20px;
    138.         margin-bottom: 15px;
    139.     }
    140.  
    141.     .r_nav_item1_active {
    142.         color: #5182FF;
    143.         border: 1px solid #5182FF;
    144.     }
    145. }
    146.  
    147. .r_nav2{
    148.     max-width: 450px;
    149.     min-width: 350px;
    150. }
    151. .r_item {
    152.     padding: 15px 0;
    153.     .r_item_title {
    154.         font-weight: 500;
    155.         margin-right: 15px;
    156.         color: #000;
    157.         font-size: 16px;
    158.     }
    159. }
    160. </style>
    161. <style lang="scss" scoped >
    162. .screen_page {
    163.     width: 1200px;
    164.     height: calc(100vh - 200px);
    165.     display: flex;
    166.     position: relative;
    167.     .screen_l{
    168.         width: 257px;
    169.         padding: 15px;
    170.         font-size: 16px;
    171.         color: #6D6D6D;
    172.         background: #fff;
    173.         .l_nav{
    174.             display: flex;
    175.             justify-content: space-between;
    176.             .l_nav_item{
    177.                 padding: 5px 0px;
    178.                 border: 1px solid #5182FF;
    179.                 border-radius: 4px;
    180.                 color: #5182FF;
    181.                 width: 50%;
    182.                 text-align: center;
    183.                 margin-right: 10px;
    184.             }
    185.             .l_nav_item:last-child{
    186.                 margin-right: 2px;
    187.             }
    188.             .l_nav_item_active{
    189.                 color: #fff !important;
    190.                 background: #5182FF !important;
    191.             }
    192.         }
    193.         .l_nav_panel::-webkit-scrollbar {
    194.             width: 4px;
    195.         }
    196.         .l_nav_panel::-webkit-scrollbar-thumb{
    197.             background: #eee;
    198.             border-radius: 10px;
    199.         }
    200.         .l_nav_panel{
    201.             margin-top: 15px;
    202.             height: calc(100vh - 290px);
    203.             overflow-y: scroll;
    204.             .panel_item{
    205.                 border-radius: 4px;
    206.                 padding: 10px 5px 10px 10px;
    207.                 display: flex;
    208.                 justify-content: space-between;
    209.                 i{
    210.                     color: #D9E4FF;
    211.                     font-size: 20px;
    212.                 }
    213.             }
    214.             .panel_item_active{
    215.                 background: rgba(81, 130, 255, 0.15);
    216.                 color: #5182FF;
    217.                 i {
    218.                     color: #5182FF;
    219.                 }
    220.             }
    221.         }
    222.     }
    223.     .screen_r{
    224.         border-left: 1px solid #D7D7D7;
    225.         white-space: nowrap;
    226.         width: calc(100% - 257px);
    227.         z-index: 100000;
    228.         background: #fff;
    229.         padding: 20px 60px 20px 30px;
    230.         position: relative;
    231.         .r_item_socrll::-webkit-scrollbar{
    232.             width: 0;
    233.         }
    234.         .r_item_socrll{
    235.             border-bottom: 1px solid #EAEAEA;
    236.             height: calc(100% - 80px);
    237.             overflow-y: scroll;
    238.             .r_item_box {
    239.                 border-bottom: 1px solid #EAEAEA;
    240.             }
    241.             .r_item_box:last-child {
    242.                 border:0;
    243.             }
    244.             .r_item:last-child{
    245.                 border: 0;
    246.             }
    247.         }
    248.         .r_btn{
    249.             position: absolute;
    250.             bottom: 40px;
    251.             right: 90px;
    252.             .el-button{
    253.                 min-height: inherit;
    254.                 padding: 9px 32px;
    255.             }
    256.             .el-button:first-child{
    257.                 background: #5182FF;
    258.                 color: #fff;
    259.             }
    260.             .el-button:nth-child(2) {
    261.                 border: 1px solid #5182FF;
    262.                 color:#5182FF;
    263.             }
    264.         }
    265.     }
    266. }
    267. </style>

    四、课程列表页中的调用

    1.  
    2. // 页面使用
    3. <template>
    4.   <div>
    5.       <Screen @gradeMenu="gradeMenu" @okMenu="okMenu" v-if="person.menuList && person.menuList.length > 0" :leftData="person.menuList"></Screen>
    6.   </div>
    7. </template>
    8.  
    9. // 引入组件
    10. <script lang="ts" setup>
    11. import Screen from "@/components/Screen/index.vue";
    12.  
    13. // 年级切换
    14. const gradeMenu = (item: any) => {
    15.     // 获取传递过来的Id
    16.     console.log(item.Id)
    17. }
    18. // 确认筛选
    19. const okMenu = (lastId: number) => {
    20.     // 获取筛选后点击确认传递过来的Id
    21.     console.log(lastId)
    22. }
    23. </script>

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

  • 相关阅读:
    dubbo功能非常完善，好用的功能你又知道哪些？
    使用ClickHouse JDBC官方驱动，踩坑无数
    在C#中进行单元测试
    【代码随想录】二刷-二叉树
    编程基础知识编程实例解析：深度探索与实战应用
    红队打靶：Fowsniff打靶思路详解（vulnhub）
    k8s-NFS系统配置
    企业网络革命：连接和访问的智慧选项
    【springboot+vue项目学习】Unable to start web server引发的问题串
    路由不变，页面刷新
  • 原文地址：https://blog.csdn.net/weixin_50450473/article/details/127665321