vue使用li标签模拟树效果

最新推荐文章于 2025-05-25 23:17:51 发布

xiongdaandxiaomi

最新推荐文章于 2025-05-25 23:17:51 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：树 li vue

本文链接：https://blog.youkuaiyun.com/xiongdaandxiaomi/article/details/83996263

Vue 专栏收录该内容

64 篇文章

订阅专栏

本文解析了一个充电站设备管理界面的实现方式，通过展示如何使用Vue框架和Element UI组件库构建多级菜单，实现充电站及其设备的层级显示与交互。文章详细介绍了如何利用v-for指令遍历数据，实现子节点和父节点的动态加载，以及通过v-show和v-if控制元素的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

返回数据格式为

在这里插入图片描述
子节点和父节点字段名称不一致

<el-tab-pane label="充电站">
        <ul class="firstLevel">
             <li v-if="item.chargingStationShortName"  v-for="(item,index) in permissionData" :key="item.chargingStationId">
               <img src="../../static/image/icon-unfold.png" alt="" @click="changeSecondLevel(index)">
               <span>{{item.chargingStationShortName}}</span>
               <ul  class="secondLevelStyle">
                 <li v-if="sItem.equipmentName" :class="{active:sindex==secondLevelLi}" v-for="(sItem,sindex) in item.equipments" :key="sindex"  v-show="secondLevel==index" @click="selectSecondLi(sindex)">
                   {{sItem.equipmentName}}
                 </li>
               </ul>
             </li>
         </ul>
      </el-tab-pane>