vxe-table 为什么调用 insert 方法动态插入的数据没有同步到 data 中

vxe-table 为什么调用 insert 方法动态插入的数据没有同步到data 中

问题分析：

看官方文档的说明就是任何动态新增的数据都属于临时数据，不会双向同步到绑定的 data 属性中
其实按照文档的说法管理增删改查共有两种方式：

<vxe-table 
  border
  keep-source
  ref="xTable"
  :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
  :data="tableData">
  <vxe-table-column type="checkbox" width="60">vxe-table-column>
  <vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}">vxe-table-column>
  <vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}">vxe-table-column>
  <vxe-table-column field="date" title="Date" :edit-render="{name: 'input'}">vxe-table-column>
vxe-table>

1.由表格提供的机制去管理增删改查

export default {
     
	data () {
     
		return {
     
			tableData: []
		}
	},
	mounted () {
     
		// 插入一条数临时数据
		this.$refs.xTable.insert({
     name: 'Test222', age: 35, date: ''}) // 从前面新增
		this.$refs.xTable.insertAt({
     name: 'Test222', age: 35, date: ''}, -1) // 从最后新增
		// 删除第二行
		this.$refs.xTable.remove(this.tableData[1])
		// 修改第三行
		this.tableData[2].name = 'Test1'
		// 获取新增的临时数据
		const insertRecords = this.$refs.xTable.getInsertRecords()
		// 获取删除的数据
		const removeRecords= this.$refs.xTable.getRemoveRecords()
		// 获取修改过的数据
		const updateRecords= this.$refs.xTable.getUpdateRecords()
		// ...等相关 API 非常多，具体请可以去看官方文档
	}
}

2.自行同步 :data 实现增删改查（将放弃表格提供的机制，全部逻辑自行控制）

export default {
     
	data () {
     
		return {
     
			tableData: []
		}
	},
	mounted () {
     
		// 插入一条数据，通过自定义属性去标识为新增的数据，例如：_isNew=true
		this.tableData.unshift({
     _isNew: true, name: 'Test222', age: 35, date: ''}) // 从前面新增
		this.tableData.push({
     _isNew: true, name: 'Test222', age: 35, date: ''}) // 从最后新增
		// 删除第二行
		this.tableData.splice(1, 1)
		// 修改第三行
		this.tableData[2].name = 'Test1'
		// 获取新增的临时数据
		const insertRecords = this.tableData.filter(row => row._isNew)
		// 一个简单的思路就到这里，具体自行去实践
	}
}