vue+elementui表格中的字段实现编辑保存

根据后台返回的数据渲染table表格，在表格中某一个单元格实现可编辑，并且保存的功能，如下图：

 <!--列表展示-->
<el-table
          border
          style="width: 100%"
          :data="tableData"
          @cell-click="changeNum"
          v-loading = "isLoading"
          element-loading-background = "rgba(255, 255, 255, .5)"
          element-loading-text = "加载中，请稍后..."
          element-loading-spinner = "el-icon-loading"
          >
    <el-table-column align="center" prop="hitch" label="名称" >
             <template slot-scope="scope">
                <el-input v-if="scope.row.isEditCell" v-model="scope.row.lasPath" @blur="cellBlur(scope.row,scope.lasPath)"         style="width:70%" ref="hitchRef"></el-input>
                <span v-else style="cursor:pointer">{{scope.row.lasPath}}</span>
             </template>
          </el-table-column>
 </el-table>


  methods: {
// 获取列表数据
    getAlarmDataFn () {
      getList({ pageSize: this.pageSize, currentPage: this.currentPage }).then((res) => {
        this.tableData = res.pageRecode
        this.count = res.allPageTotal
        this.isLoading = false
        // 遍历表数据，为每条数据添加isEditCell属性
        var length = this.tableData.length
        for (var i = 0; i < length; i++) {
          this.tableData[i].isEditCell = false
        }
      })
    },

   // 编辑
    changeNum (row, column) {
      this.$set(row, 'isEditCell', true)
      this.tableData = this.tableData.filter(item => {
        return item
      })
      // 视图刷新
      console.log(column.property)
      if (column.property == 'remark') {
        this.$nextTick(() => {
          this.$refs.remarkRef.focus() // 视图出现后使input获取焦点
        })
      } else {
        this.$nextTick(() => {
          this.$refs.hitchRef.focus() // 视图出现后使input获取焦点
        })
      }
    },

    // 编辑框失去焦点
    cellBlur (row, column) {
      console.log(row.lasPath)
      row.isEditCell = false
      this.$set(row, 'isEditCell', false)
      updateLasPath({ projectId: row.projectId, lasPath: row.lasPath }).then((res) => {
        this.getAlarmDataFn()
      })
    },

}