<el-dialog
title="title"
:visible.sync="dialogVisible"
width="600"
>
<div v-for="(item, index) in studyConditions" style="margin-top:20px;">
<li>
{{item.date}} : {{item.time}}
</li>
<li>
<span style="display:none">
{{suibain}}
</span>
<el-button v-if="showArray[index]" @click="wrapSc(index)">折 叠</el-button>
<el-button v-else @click="openSc(index)">打 开</el-button>
</li>
<studyCondition v-show="showArray[index]" :studyCondition="item">
</studyCondition>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible= false">关 闭</el-button>
</span>
</el-dialog>
遍历studyConditions数组中的所有元素，根据每个元素生成对应页面studyCondition
但是一页太多放不下要用v-if判断另一个数组中的bool值，来决定页面是否折叠
<span style="display:none">
{{suibain}}
</span>
另外定义-个suibian的bool类型
<script>....</script>中加入
wrapSc:function(index){
this.showArray[index] = false
this.suibain = !this.suibain
},
openSc:function(index){
this.showArray[index] = true
this.suibain = !this.suibain
},
同时修改showArray数组和suibian变量才能触发v-if里面的页面刷新，如果没有另外定义一个变量来监测数据变化，折叠效果不会有效。还不知道原理，可能是不能自动根据监控其他数组的改变触发渲染效果，
如果是el-table中要使用其他数组，实现单行编辑的效果，可以在template中放入变量，多列元素中只需要放一列
<el-table-column label="昵称" width="100" ref="column_user_nick_name">
<template slot-scope="scope">
<span v-if="!showArray[scope.$index]">{{ scope.row.user_nick_name }}</span>
<span style="display:none">{{flash}}</span>
<span v-if="showArray[scope.$index]" class="cell-edit-input">
<el-input v-model="user_nick_name" placeholder="请输入内容"></el-input>
</span>
</template>
</el-table-column>
<el-table-column fixed="right" prop="operation" label="操作" width="140" >
<template slot-scope="scope">
<el-button v-if="!showArray[scope.$index]" @click="editBaseInfo(scope)" type="text" size="small">编辑</span></el-button>
<el-button v-if="showArray[scope.$index]" @click="editBaseInfo(scope)" type="text" size="small">保存</span></el-button>
<el-button v-if="showArray[scope.$index]" @click="cancelEditBaseInfo(scope)" type="text" size="small">取消</span></el-button>
<el-button @click.native.preven="deleteBaseInfo(scope.$index, tableData)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
在editBaseInfo中设置showArray对应变量，即可实现单行切换编辑状态