vue查看更多的写法

页面布局：

<div class="my_card" v-for="(item,index) in tableData" style="margin-bottom: 10px;">
	<div v-for="column in tableColumns.slice(0,3)">
		<div class="column-box">
			<label>{{column.title}}</label>
			<div class="column_box">
				<template></template>
			</div>
		</div>
	</div>
	<div v-for="column in tableColumns.slice(3,tableColumns.length)" class="more_show" style="display: none;">
		<div class="column-box">
			<label>{{column.title}}</label>
				<div class="column_box">
				    <template></template>
				</div>
			</div>
		</div>
	<div style="text-align: center;">
		<el-button type="primary" class="button" v-on:click="seeMore(index)" style="font-size: 14px;margin-top: 10px;">查看更多</el-button>
	</div>
</div>

js：

//查看更多
seeMore:function(index){
	var my_card = document.getElementsByClassName("my_card")
	var more_show = my_card[index].childNodes
	console.log(my_card)
	//先清除其余的查看更多样式
	for(var i=0;i<my_card.length;i++){
		var more_show_other = my_card[i].childNodes
		for(var j=0;j<more_show_other.length;j++){
			if(more_show_other[j].nodeType==1&&more_show_other[j].className=="more_show"){
				more_show_other[j].style.display = "none"
			}
		}
	}
	//再打开当前的查看更多
	for(var i=0;i<more_show.length;i++){
		if(more_show[i].nodeType==1&&more_show[i].className=="more_show"){
			 more_show[i].style.display = "block"
		}
	}
},

样式：

/*卡片视图添加样式*/
.my_card{
	width: 98%;
	font-size:16px;
	border: 1px solid #EBEEF5;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	transition: .3s;
	background-color: #fff;
	color: #303133;
	border-radius: 4px;
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
}
.my_card label{
	display: block;
	width: 40%;
	height: 45px;
	line-height: 45px;
	float: left;
}
.my_card>div:first-child{
	font-weight: 600;
	border-bottom: 1px solid #eee;
}
.my_card>div:last-child{
	font-weight: 600;
	border-top: 1px solid #eee;
}

最终效果：