实现单元格编辑与保存

实现：点击单元格可修改单元格内容，并可以保存修改

点击单元格，获取单元格所在行数据的 id,存储为 editId,获取单元格所在列的字段名，存储为 editCol

当单元格 scope.row.id === editId && scope.row.prop === eidtCol 时，显示输入框

当单元格 scope.row.id !== editId || scope.row.prop !== eidtCol 时，显示文本

注意： 点击不可编辑的单元格或 table 以外的区域，取消编辑状态

未保存修改，取消编辑状态时应该显示原来的数据（不能直接修改原有数据）

保存修改时，重新请求列表数据

  <el-tabel @cell-click='handleClickCell'>
      <el-table-column prop="ruleName" label="制度名称">
          <template slot-scope="scope">
              <div v-show="scope.row.id !== editId || scope.row.prop !== eidtCol">{{ scope.row.ruleName }}</div>
              <div v-show="scope.row.id == editId && scope.row.prop == eidtCol">
                 <el-input  v-model="tempText"></el-input>
                 <i class='el-icon-success' @click='hanleSaveName(scope.row)'></i>
              </div>
          </template>
      </el-table-column>
        <el-table-column prop="ruleNo" label="制度名称">
          <template slot-scope="scope">
              <div v-show="scope.row.id !== editId || scope.row.prop !== eidtCol">{{ scope.row.ruleNo }}</div>
              <div v-show="scope.row.id == editId && scope.row.prop == eidtCol">
                 <el-input  v-model="tempText"></el-input>
                 <i class='el-icon-success' @click='hanleSaveNo(scope.row)'></i>
              </div>
          </template>
      </el-table-column>
  </el-table>
<script>
methods:{
  handleClickCell(row,col,cell,event){ // 定位可编辑的单元格
    if(['ruleName','ruleNo'].includes(col.property)){
        this.editId = row.id    // 定位可编辑的行
    }else{
        this.editId = null // 点击不可编辑的列时取消编辑状态
    }
    this.tempText = row[col.property]
    this.editCol = col.property // 定位可编辑的列
  }
  hanleSaveName(row){
      // 请求接口，修改数据
      ......
      // 隐藏编辑框，显示文本
      this.editId = null
      // 请求新的列表数据
      this.requestData()
  }
  hanleSaveNo(){
  }
  callbackFn(e){
      if(!['el-input__inner','cell'].includes(e.target.getAttribute('class'))){
          this.editId = null // 当点击表格之外时取消编辑状态
      }
   }
},
created(){
    window.addEventListener('click',this.callbackFn)
},
destroyed(){
    window.removeEventListener('click',this.callbackFn)
}
</script>