Vxe-Table datetime点击编辑的时候datetime变为空了
时间: 2024-10-17 22:07:58 浏览: 45
Vxe-Table 是 Vue 开发的一个表格组件,它提供了一个日期时间选择单元格(datetime cell),用于用户编辑。当用户点击这个单元格进行编辑时,如果直接清除输入或取消编辑,单元格的内容可能会变成默认值,即显示为空。这是因为编辑模式下如果没有特定的处理逻辑来保持用户输入,日期时间字段通常会恢复到初始状态。
如果你遇到这个问题,可以尝试通过自定义事件或组件提供的 API 来解决。例如,在 `edit` 事件触发后,你可以保存用户的输入,然后在 `onEdit` 或 `beforeClose` 回调中设置回去。示例代码如下:
```vue
<template>
<vxe-table :value="data" @edit="handleEdit">
<!-- ... -->
<vxe-column type="datetime" @cell-edit="handleCellEdit"/>
</vxe-table>
</template>
<script>
export default {
methods: {
handleEdit({ row, column, cell }) {
// 编辑过程中保存原始值
this.originalValues[rowIndex][column.field] = cell.value;
// ...其他操作...
},
handleCellEdit(value) {
// 取消编辑时,如果输入为空,将原始值填回
if (!value) {
value = this.originalValues[rowIndex][column.field];
}
// 返回更新后的值给 Vxe-Table
return value;
}
}
}
</script>
```
在这里,`this.originalValues` 应该是一个数组,存储每个行的日期时间原始值,`rowIndex` 和 `column.field` 分别表示当前行索引和日期时间列的字段名。
阅读全文