<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">
            {{flush}}
          </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">

{{flush}}

</span>

 

另外定义-个flush的bool类型，也可以看自己心情定义其他类型，只要每次需要刷新的时候修改即可

<script>....</script>中加入

wrapSc:function(index){
  this.showArray[index] = false
  this.flush = !this.flush
}, 
openSc:function(index){
  this.showArray[index] = true
  this.flush= !this.flush

}, 

同时修改showArray数组和flush变量才能触发v-if里面的页面刷新，如果没有另外定义一个变量来监测数据变化，折叠效果不会有效。除非使用$set,修改变量。这样vue才会在下一个刷新周期重新渲染页面。直接赋值不一定有效

如果是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">{{flush}}</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对应变量，即可实现单行切换编辑状态

 

一般情况下使用 =  对值类型赋值，vue页面会自动渲染，

对对象赋值如果是同一个引用地址，页面不会自动渲染，可以尝试$set

如果只是修改了对象的某个属性，引用地址没变，可以使用assign的方式

this.bseInfo= Object.assign({}, this.bseInfo, {noUserKey: 'a'})

不直接修改该数据对象，而是生成一个新的数据对象，遵循了单向数据流 的设计理念

表达式右侧会生成一个新的对象，this.bseInfo会指向一个新的引用地址（常用于 浅拷贝 对象）

或者

this.bseInfo= Object.assign(this.bseInfo, {k: v})

表达式右侧只会修改this.bseInfo，this.bseInfo仍然指向原引用地址（常用于 合并 对象）

参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign