Vue 可编辑表格 function中更改edit状态，span中不会实时更新

需求：点击编辑按钮，可编辑表格内容，再次点击，可保存
问题：第二次点击edit已取反，但是组件没有相应的跳转变化

原因：
主要参考了这个链接
https://www.cnblogs.com/ckmouse/p/11490604.html

sol:
处理后台数据时，增加edit列

code：

<template>
    <div class="app-container">
        <el-table
          :data="MoleData"
          style="width: 95%"
          border
          highlight-current-row>

            <el-table-column key="1" prop="moleId" label="ID">
              <template scope="scope">
                  <!--通过v-show和对行数据中的编辑状态变量取反来动态切换编辑状态-->
                  <!--v-show相比v-if有更高的初始渲染消耗，适合频繁切换的场合-->
                  <span>{{scope.row.moleId}}</span>
              </template>
            </el-table-column>


            <!-- 只显示当前打分 -->
            <el-table-column key="6" v-if="!readOnly" prop="grade[0]" label="打分">
              <template scope="scope">
                <el-input v-model="scope.row.grade.score" placeholder="请输入内容" v-show="scope.row.showEdit"></el-input> 
                <!-- <span v-show="!scope.row.showEdit" v-if="scope.row.grade.score">{{scope.row.grade.score}}</span> -->
                <span v-show="!scope.row.showEdit">{{scope.row.grade.score}}</span>
                <!-- <span v-else>暂未打分</span> -->

              </template>
            </el-table-column>

            <el-table-column key="7" v-if="!readOnly" label="操作">
              <template scope="scope">
              <!-- scope可以取到行索引(scope.$index)和行数据(scope.row) -->
                  <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">
                      {{scope.row.showEdit?'保存':'修改'}}
                      <!-- {{scope.row.showEdit}} -->
                  </el-button>
              </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

import {getMoleEva} from '../../request/api.js'
import {updateMoleEva} from '../../request/api.js'
import store from '../../store'

export default {
    data() {
      this.colConfigs = [
      { prop: 'grader', label: 'grader' },
      { prop: 'score', label: 'ranking' },
      ]
        return {
          delVisible: false,//删除提示弹框的状态
          MoleData: [],//已打分mole
          MoleDataUneva: [], //未打分mole数据
          showGrader1: true,
          showGrader2: true,
          showGrader3: true,
          readOnly: true
        }
    },
    mounted() {
      this.getInitMole()
    },
    methods: {
      getInitMole(){
        getMoleEva({
          userName: store.state.user.username
        }).then(res => {
          // 获取数据成功后的其他操作
          for (var mole in res) {
            this.MoleData.push({"moleId": res[mole].moleId, "prop1": res[mole].prop1, "prop2": res[mole].prop2, "prop3": res[mole].prop3, "grade": res[mole].grade, "showEdit": false})
          }
          console.log(this.MoleData)
        }) 
      },
      // 获取操作的一行的数据row，将其中的编辑状态变量showEdit取反，切换状态
      // 也可以去掉，在@click中直接取反
      // 只有保存才需要call后台
      handleEdit(index, row) {
          console.log("index: " + index)
          row.showEdit = !row.showEdit
          console.log("showEdit: " + row.showEdit)
          console.log(row)
      }
    },
}
</script>

<style scoped>
    *{margin:0;padding:0}
    .app-container{font:15px/1.3 'Open Sans', sans-serif;color: #5e5b64;text-align:center;}
    a, a:visited {outline:none;color:#389dc1;}
    a:hover{text-decoration:none;}
    section, footer, header, aside, nav{display: block;}
    /* page.css */
    .order {padding: 20px}
</style>

关键点：
Line 77，为每一行的showEdit赋值