一个很低级的错误。
背景:点击学生信息,学生信息的具体内容收起,右上角的icon改变。
<div class="panel panel-info">
<div class="panel-heading" @click="shrink()">
<el-row :gutter="20">
<el-col :span="23"><span class="panel-title">学生信息</span></el-col>
<el-col :span="1"><b-icon v-if="!activeStudent" icon="arrow-right" key="1"></b-icon></el-col>
<el-col :span="1"><b-icon v-if="activeStudent" icon="arrow-down" key="2"></b-icon></el-col>
</el-row>
</div>
<table class="table" v-show="activeStudent">
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
</tr>
<tr v-for="(studentItem,index) in studentData" :key="index">
<td v-for="(item,idx) in studentItem" :key="idx">
{{item}}
</td>
</tr>
</table>
</div>
js部分注意是data而不是computed! 如果是computed就无法实现!
data(){
return{
//折叠面板的序号
activeStudent: false,
}
}