<template>
<div name="tapanle">
<div class="container">
<div v-for="(item,index) in data" :key="index">
<div class="title">
<div>{{item.title}}</div>
<div>
<div class="show-info" v-show="item.showInfo" @click="show(item.showInfo,index)">点击隐藏</div>
<div class="show-info" v-show="!item.showInfo" @click="show(item.showInfo,index)">点击显示</div>
</div>
</div>
<el-collapse-transition>
<!--el-collapse-transition 要先引入CollapseTransition 组件,不然会报错-->
<div class="data-info" v-show="item.showInfo">
<div>{{item.info}}</div>
<div>{{item.content}}</div>
</div>
</el-collapse-transition>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
title: "测试一",
info: "轮到我出场了",
content: "测试展示的数据"
},
{
title: "测试二",
info: "轮到我出场了",
content: "测试展示的数据"
},
{
title: "测试三",
info: "轮到我出场了",
content: "测试展示的数据"
},
{
title: "测试四",
info: "轮到我出场了",
content: "测试展示的数据"
},
{
title: "测试五",
info: "轮到我出场了",
content: "测试展示的数据"
},
{
title: "测试六",
info: "轮到我出场了",
content: "测试展示的数据"
}
]
};
},
mounted() {
this.init();
},
methods: {
init() {
this.data.map(item => {
return (item.showInfo = false);
});
this.data[0].showInfo = true;
this.data.splice(0, 1, this.data[0]);
},
show(show, index) {
this.data[index].showInfo = !show;
this.data.splice(index, 1, this.data[index]);
}
}
};
</script>
<style lang="scss" scoped>
.container {
width: 300px;
border: 1px solid #ccc;
.title {
height: 40px;
line-height: 40px;
display: flex;
justify-content: space-between;
font-size: 12px;
padding: 0 15px;
border-bottom: 1px solid #ccc;
}
.show-info {
cursor: pointer;
}
.data-info {
font-size: 12px;
text-align: left;
padding-left: 15px;
border-bottom: 1px solid #ccc;
div {
height: 30px;
line-height: 30px;
}
}
}
</style>
效果