antd-vue table双击编辑单元格，失去焦点保存

场景：

使用ant-design-vue的table组件，要求实现新增，直接在表格中增加一行，双击或单击当前行状态变为可编辑状态，点击其他dom，失去焦点时，进行自动保存。

示例：

编辑状态

@dblclick.native="dbClickFun(record, index, item)" 双击修改当前行状态。record.isEdit设置为true

@blur="blurFjxx($event, record, item)" 失去焦点判断。

<template>
  <a-modal
    :title="title"
    width="1000px"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <div style="margin-bottom:10px;">
      <a-button type="primary" @click="addFun">新增项</a-button>
      <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => clearFun()">
        <a-button style="margin:0 10px;" type="primary">清除</a-button>
      </a-popconfirm>
      <a-button type="primary" @click="saveFun">保存</a-button>
    </div>
    <a-table
      bordered
      ref="table"
      size="small"
      :columns="columns"
      :initLoad="false"
      :data-source="tableData"
      :pagination="false"
      :rowKey="(record, index) => index"
      :scroll="{ y: 550 }"
    >
      <template v-for="(item, ind) in slotArr" :slot="item" slot-scope="text, record, index">
        <div :key="ind">
          <a-input-number
            v-if="item != 'fjmc' && item != 'fjlb' && record && record.isEdit"
            v-model="record[item]"
            style="width:180px"
            @blur="blurFjxx($event, record, item)"
          ></a-input-number>
          <a-input
            v-if="(item === 'fjmc' || item === 'fjlb') && record && record.isEdit"
            v-model="record[item]"
            style="width:180px"
            @blur="blurFjxx($event, record, item)"
          ></a-input>
          <a-button
            type="link"
            style="color:rgba(0, 0, 0, 0.65)"
            v-else-if="!record.isEdit"
            @click="dbClickFun(record, index, item)"
            @dblclick.native="dbClickFun(record, index, item)"
            >{{ text }}</a-button
          >
        </div>
      </template>
    </a-table>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import { downloadApi, detailDeleteApi } from '@/api/modular/main/trackingWeeklyReport/index'
import moment from 'moment'
import { STable } from '@/components'
export default {
  components: {
    STable
  },
  props: {
    current: {
      type: Number,
      default: 0
    },
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      queryParam: {},
      tableData: [
        { fjmc: 'ssa', fjxx: 2, fjsx: 22, fjlb: '33', isEdit: false },
        { fjmc: 'fff', fjxx: 4, fjsx: 522, fjlb: '33', isEdit: false },
        { fjmc: 'ssa', fjxx: 3, fjsx: 22, fjlb: '33', isEdit: false }
      ],
      visible: false,
      confirmLoading: false,
      title: '模板设置',
      slotArr: ['fjmc', 'fjxx', 'fjsx', 'fjlb'],
      columns: [
        {
          title: '分级名称',
          scopedSlots: { customRender: 'fjmc' },
          dataIndex: 'fjmc'
        },
        {
          title: '分级下限',
          scopedSlots: { customRender: 'fjxx' },
          dataIndex: 'fjxx'
        },
        {
          title: '分级上限',
          scopedSlots: { customRender: 'fjsx' },
          dataIndex: 'fjsx'
        },
        {
          title: '分级类别',
          scopedSlots: { customRender: 'fjlb' },
          dataIndex: 'fjlb'
        }
      ]
    }
  },
  methods: {
    blurFjxx(e, record, key) {
      console.log('失去焦点', e, record)
      record[key] = e.target.value
      record.isEdit = false
    },
    clearFun() {
      this.tableData = []
    },
    dbClickFun(record, index, key) {
      console.log('双击')
      let obj = Object.assign(record, { isEdit: true })
      this.$set(this.tableData, index, obj)
      console.log('this.tableData', this.tableData)
    },
    addFun() {
      this.tableData.push({ fjmc: '', fjxx: 0, fjsx: 0, fjlb: '', isEdit: false })
    },
    // 初始化方法---
    show(data) {
      this.visible = true
      // this.tableData = data
    }, //
    saveFun() {
      console.log(this.tableData)
    },
    /*  提交表单 */
    handleSubmit() {
      this.handleCancel()
    },
    handleCancel() {
      this.confirmLoading = false
      this.visible = false
    }
  }
}
</script>
<style scoped lang="less">
.editable-row-operations a {
  margin-right: 8px;
}
</style>