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

首先感谢博主的分享，原文链接：https://blog.csdn.net/weixin_42024362/article/details/80519987
先上效果图：

<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>