SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
  data () {
        return {
            tableData: []
        }
    },
    methods:{
        pushEvent () {
    const newRow = {
      id: new Date().getTime(),
      name: `Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}`,
      role: '',
      sex: `Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}_Name_${new Date().getTime()}`,
      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.5.24">

</script>
<script src="https://unpkg.com/vxe-table@3.15.4">

</script>

<div id="app">
	<template>
		<div>
			<p>Table 演示 scroll-x GT: 2</p>
			<vxe-button status="primary" @click="pushEvent">新增(尾部)</vxe-button>
			<vxe-button status="primary" @click="cancelRowEvent">取消</vxe-button>
			<vxe-table border height="200px" :show-overflow="false" :cell-config="{}" size="mini" ref="tableRef1" :column-config="{
                useKey: true,
                resizable: true,
            }" :row-config='{"useKey":true,"keyField":"id","isCurrent":true,"isHover":true}' :scroll-x="{
                enabled:true,
                gt:2
            }" :data="tableData">
				<vxe-table-column type="seq" width="70" fixed="left"></vxe-table-column>
				<vxe-table-column type="checkbox" width="70" fixed="left"></vxe-table-column>
				<vxe-table-column field="name" title="Name" width="100" resizable></vxe-table-column>
				<vxe-table-column field="sex" title="Sex" width="400" resizable></vxe-table-column>
				<vxe-table-column field="age" title="Age" width="1000" resizable></vxe-table-column>
			</vxe-table>
		</div>

		<div>
			<p>Table 演示 scroll-x GT default : 100</p>
			<vxe-button status="primary" @click="pushEvent">新增(尾部)</vxe-button>
			<vxe-button status="primary" @click="cancelRowEvent">取消</vxe-button>
			<vxe-table border height="200px" :show-overflow="false" :cell-config="null" size="mini" ref="tableRef2" :column-config="{
                useKey: true,
                resizable: true,
            }" :row-config='{"useKey":true,"keyField":"id","isCurrent":true,"isHover":true}'
            :scroll-x="{
                enabled:true
            }"
            :data="tableData">
				<vxe-table-column type="seq" width="70" fixed="left"></vxe-table-column>
				<vxe-table-column type="checkbox" width="70" fixed="left"></vxe-table-column>
				<vxe-table-column field="name" title="Name" width="100" resizable></vxe-table-column>
				<vxe-table-column field="sex" title="Sex" width="400" resizable></vxe-table-column>
				<vxe-table-column field="age" title="Age" width="1000" resizable></vxe-table-column>
			</vxe-table>
		</div>

	</template>
</div>
@import url("https://unpkg.com/vxe-pc-ui@3.5.24/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.15.4/lib/style.css");