SOURCE

var Main = {
  data () {
        return {
            tableData: []
        }
    },
    methods:{
        pushEvent () {
    const newRow = {
      id: new Date().getTime(),
      name: `Name_${new Date().getTime()}`,
      role: '',
      sex: '',
      age: 18,
      address: ''
    }
    this.tableData.push(newRow)
    // this.insertRecords.push(newRow)
    this.$nextTick(() => {
      const $table = this.$refs.tableRef
      if ($table) {
        $table.setEditRow(newRow)
      }
    })
  },
  cancelRowEvent () {
    const $table = this.$refs.tableRef
    if ($table) {
      this.tableData.splice(0,1)
      $table.clearEdit()
    }
    }
    }
};
var app = new Vue(Main).$mount('#app')

<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-pc-ui@3.3.46"></script>
<script src="https://unpkg.com/vxe-table@3.11.39"></script>

<div id="app">
  <template>
    <div>
      <p>Table 演示</p>
      <vxe-button status="primary" @click="pushEvent">新增（尾部）</vxe-button>
      <vxe-button status="primary" @click="cancelRowEvent">取消</vxe-button>
      <vxe-table
          border
          show-overflow
          ref="tableRef"
          :column-config="{minWidth:'auto',resizable:true}"
          :edit-config="{ trigger: 'manual',mode:'row'}"
          :data="tableData">
        <vxe-column type="seq" width="70"></vxe-column>
        <vxe-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-column>
        <vxe-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-column>
        <vxe-column field="age" title="Age" :edit-render="{name: 'input'}"></vxe-column>
      </vxe-table>
    </div>
  </template>
</div>

@import url("https://unpkg.com/vxe-pc-ui@3.3.46/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.11.39/lib/style.css");