首先感谢博主的分享，原文链接：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>