不多少了直接上源码，里面有注释

值得注意的是，取消的时候保存旧的数据

假如你let old=row

源一直是row，old还是新的row，所以需要转化下

this.oldtable[row.index] = JSON.parse(JSON.stringify(row)) // 复制旧的数据，取消时用到

index是如果双击了多个，则会冲突而设置的

源码：

<template>
  <el-table
    :data="tableData"
    border
    style=""
    :row-class-name="tableRowClassName"
    @row-dblclick="dbclick"
  >
    <el-table-column prop="domain" label="域名" width="180"></el-table-column>
    <el-table-column prop="name" label="企业名称" width="180">
      <template slot-scope="scope">
        <el-form :model="scope.row">
          <el-form-item size="mini">
            <el-input
              v-if="scope.row.isOK"
              v-model="scope.row.name"
              style="width:100%;hight:100%"
            ></el-input>
            <span v-else>{{ scope.row.name }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="dateym" label="域名到期日" width="120">
      <template slot-scope="scope">
        <el-form :model="scope.row">
          <el-form-item size="mini">
            <el-input
              v-if="scope.row.isOK"
              v-model="scope.row.dateym"
              style="width:100%;hight:100%"
            ></el-input>
            <span v-else>{{ scope.row.dateym }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="datesx" label="上线日期" width="120">
    </el-table-column>
    <el-table-column prop="datexf" label="续费日期" width="120">
    </el-table-column>
    <el-table-column prop="des" label="备注"> </el-table-column>
    <el-table-column prop="datesx" label="账号密码" width="220">
    </el-table-column>
    <el-table-column prop="datesx" label="域名账号密码" width="220">
    </el-table-column>
    <el-table-column label="操作" width="280">
      <template slot-scope="scope">
        <el-button
          size="mini"
          v-if="!scope.row.isOK"
          @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button
          v-if="scope.row.isOK"
          size="mini"
          type="primary"
          @click="handleEnter(scope.$index, scope.row)"
          >确定</el-button
        >
        <el-button
          v-if="scope.row.isOK"
          size="mini"
          type="warning"
          @click="handleCancle(scope.$index, scope.row)"
          >取消</el-button
        >
        <el-button
          v-if="!scope.row.isOK"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tableData: [
        {
          id: '1',
          domain: 'xhcss.com',
          name: '小贺',
          dateym: '2017/12/10',
          datesx: '2017/12/10',
          datexf: '2018-12月',
          isOK: false,
          des: '服务器，',
          zhmm: '',
          yuzhmm: ''
        },
        {
          id: '2',
          domain: 'xiedandan.com',
          name: '谢丹丹',
          dateym: '2019/03/03',
          datesx: '2018/1/2',
          datexf: '2019/1/2',
          isOK: false,
          des: '',
          zhmm: '',
          yuzhmm: ''
        }
      ],
      oldtable: [],
      oldtables: []
    }
  },
  methods: {
    // 双击
    dbclick(row, column, event) {
      row.isOK = !row.isOK
      this.oldtable[row.index] = JSON.parse(JSON.stringify(row)) // 复制旧的数据，取消时用到
      // 判断是否为双击第二次修改，第二次双击则提交数据进行修改，或者可点击按钮取消
      if (!row.isOK === true) {
        console.log('修改')
      }
    },
    // 修改表格
    handleEdit(index, row) {
      row.isOK = !row.isOK
      this.oldtable[index] = JSON.parse(JSON.stringify(row)) // 复制旧的数据，取消时用到
    },
    // 确定按钮
    handleEnter(index, row) {
      row.isOK = !row.isOK
    },
    // 把每一行的索引放进row,方便双击修改无法获得索引则无法取消后数据进行还原
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 取消
    handleCancle(index, row) {
      // 取消isOK的状态
      let olds = Object.assign(this.oldtable[index], { isOK: false })
      this.$set(this.tableData, index, olds)
    },
    // 删除行数
    handleDelete(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>