基于vue手动实现折叠面板（展开一项，其他项收起）

灰太狼 2022-12-17 07:26 363阅读 0赞

首先感谢博主的分享，原文链接：`https://blog.csdn.net/weixin_42024362/article/details/80519987`  
先上效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center]

<template>
      <div class="report">
        <ul class="years">
          <li class="years_item" v-for="(item, index) in menuList" :key="item.name">
            <div class="title" @click="showToggle(item, index)">
              <span>{
       { item.name }}</span>
              <img
                class="arrow_img"
                v-bind:src="item.isSubShow ? item.imgUrl : arrow_r"
              />
            </div>
            <ul v-show="item.isSubShow" class="content">
              <li v-for="(subItem, index) in item.subItems" :key="index">
                <div>{
       { subItem.name }}</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'report',
      data () {
        return {
          arrow_r: require('../assets/img/arr_down.png'),
          menuList: [
            {
              name: '2020',
              imgUrl: require('../assets/img/arr_right.png'),
              isSubShow: false,
              subItems: [
                {
                  name: '字符录入------内容1'
                },
                {
                  name: '白话文录入------内容1'
                },
                {
                  name: '文言文录入------内容1'
                },
                {
                  name: '小写数字录入------内容1'
                }
              ]
            },
            {
              name: '2019',
              imgUrl: require('../assets/img/arr_right.png'),
              isSubShow: false,
              subItems: [
                {
                  name: '票据录入------内容2'
                },
                {
                  name: '翻打传票------内容2'
                },
              ]
            },
            {
              name: '2018',
              imgUrl: require('../assets/img/arr_right.png'),
              isSubShow: false,
              subItems: [
                {
                  name: '交易码录入------内容3'
                },
                {
                  name: '交易名称录入------内容3'
                },
              ]
            },
            {
              name: '2017',
              imgUrl: require('../assets/img/arr_right.png'),
              isSubShow: false,
              subItems: [
                {
                  name: '操作码录入------内容4'
                },
                {
                  name: '操作名称录入------内容4'
                },
              ]
            },
            {
              name: '2016',
              imgUrl: require('../assets/img/arr_right.png'),
              isSubShow: false,
              subItems: []
            }]
        }
      },
      methods: {
        // 点击展开折叠菜单事件
        showToggle (item, ind) {
          this.menuList.forEach(i => {
            // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false
            if (i.isSubShow !== this.menuList[ind].isSubShow) {
              i.isSubShow = false;
            }
          });
          item.isSubShow = !item.isSubShow;
        }
      }
    }
    </script>
    
    <style lang='less' scoped>
    @px: 4;
    .report {
      height: 100%;
      .years {
        margin: 24px * @px;
        .years_item {
          line-height: 280px;
          padding: 0 24px * @px;
          margin: 24px * @px 0;
          border: 1px * @px solid #fff;
          background: #ffffff;
          border-radius: 10px * @px;
          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .arrow_img {
              width: 150px;
              height: 150px;
            }
          }
        }
      }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/7943547e835c42beb38ee96b3cad16da.png