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

原创已于 2022-01-26 22:22:53 修改 · 8.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #vxe-table

于 2019-12-17 15:05:27 首次发布

vxe-ui 专栏收录该内容

105 篇文章

订阅专栏

在 vxe-table 中遇到编辑表格时，若单元格使用输入框无法输入值，通常是由于 data 中缺少列字段属性导致。vue 的双向绑定原理要求先定义数据属性，再进行操作。举例来说，当列属性 'role' 未定义时，vue 无法监听并同步数据。解决办法是在获取数据后动态添加对应的属性，确保遵循 vue 的规则，从而实现数据的正常双向同步。

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-column type="radio" width="60"></vxe-column>
      <vxe-column type="seq" width="80"></vxe-column>
      <vxe-column field="name" title="名字" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column field="age" title="年龄" :edit-render="{name: 'input'}"></vxe-column>
      <vxe-column field="role" title="角色" :edit-render="{name: 'input'}"></vxe-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)
	}
}