首先感谢博主的分享,原文链接:https://blog.csdn/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>
更多推荐
基于vue手动实现折叠面板(展开一项,其他项收起)
发布评论