vxe-table 使用编辑表格，在单元格使用输入框时无法输入值

vxe-table 使用编辑表格，在单元格使用输入框时无法输入值

由于 data 中未存在列字段属性导致无法编辑

这个就和 vue 的实现方式的问题了，vue 的双向绑定是先监听 data 中的所有属性，然后在组件更新后同步值，如果在渲染之前不存在对应的字段名，那 vue 就无法初始化数据监听，导致数据无法同步更新

例如以下代码

role 这一列的属性未定义，将会导致 vue 无法监听数据无法同步

<vxe-table
      border
      show-overflow
      height="600"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'row'}">
      <vxe-table-column type="radio" width="60">vxe-table-column>
      <vxe-table-column type="seq" width="80">vxe-table-column>
      <vxe-table-column field="name" title="名字" :edit-render="{name: 'input'}">vxe-table-column>
      <vxe-table-column field="age" title="年龄" :edit-render="{name: 'input'}">vxe-table-column>
      <vxe-table-column field="role" title="角色" :edit-render="{name: 'input'}">vxe-table-column>
    vxe-table>

export default {
	data () {
		return {
			tableData: []
		}
	},
	created () {
		setTimeout(() => {
			let list = [
				{name: '名字1', sex: '0', age: 24},
				{name: '名字2', sex: '1', age: 26},
				{name: '名字3', sex: '1', age: 28},
				{name: '名字4', sex: '1', age: 30}
			]
			this.tableData = list
		}, 300)
	}
}

解决方法

可以在请求到数据之后对数组动态添加对应的属性，遵循 vue 先定义后使用的规则，就可以确保数据能正常双向同步了

export default {
	data () {
		return {
			tableData: []
		}
	},
	created () {
		setTimeout(() => {
			let list = [
				{name: '名字1', sex: '0', age: 24},
				{name: '名字2', sex: '1', age: 26},
				{name: '名字3', sex: '1', age: 28},
				{name: '名字4', sex: '1', age: 30}
			]
			this.tableData = list.map(item => {
				item.role = null // 拿到数据之后动态定义属性
				return item
			})
		}, 300)
	}
}