Vue2 + antdv 动态修改a-table的行的值的数据

需求：

在如下编辑页面的表格中，点击编辑，弹出频段编辑页面。修改完后数据回传并更新表单数据，不要通过后台。

实现步骤：

1. 点击编辑时记录行号

2. 传递当前记录到子页面

3. 子页面通过emit回传修改后的记录

4. 修改后的记录更新到表格

具体代码：

1. 点击编辑（或一行的空白处）记录行号

1） a-table添加 customRow属性，响应点击事件 :customRow="handleRowClick"

2）提供行点击事件

 <a-table :columns="columns" :data-source="spTests" :customRow="handleRowClick">

　　

// 点击空白处获取当前行
    handleRowClick(record, index) {
      return {
        on: {
          click: () => {
            this.currRowIndex = index //暂存当前行号
          }
        }
      }
    },

　　3. 子页面修改，emit回传数据

handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof values[key] === 'object' && !(values[key] === null)) {
              values[key] = JSON.stringify(values[key])
            }
          }
          this.$emit('ok', values)//  回传数据
          this.handleCancel()
        }
        this.confirmLoading = false
      })
    },

　　4. 父页面接收数据并更新数据

 <edit-spec-form ref="editSpecForm" @ok="handleEditOK" />

　　

handleEditOK(it) {
      this.spTests[this.currRowIndex] = it //更新数据到当前行
     
    },