单元格值_疑难杂症——eltable单元格使用输入框时无法输入值
时间: 2023-08-03 13:05:43 浏览: 148
这个问题可能是由于使用了 `el-input` 组件作为单元格的编辑器,但没有正确配置其 `v-model` 绑定值。以下是一种可能的解决方法:
1. 确保 `el-input` 组件的 `v-model` 绑定值正确绑定到单元格的数据字段上。例如,如果您的数据对象中有一个 `name` 字段,可以这样定义编辑器:
```
<template slot-scope="scope">
<el-input v-model="scope.row.name"></el-input>
</template>
```
2. 如果您的表格是可编辑的(即设置了 `:edit-config="{trigger: 'click', mode: 'cell'}"`),则需要在 `el-table` 标签上添加 `@edit-closed="handleEditClosed"` 事件监听器,并在 `handleEditClosed` 方法中手动触发表格的更新:
```
<el-table :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}" @edit-closed="handleEditClosed">
<!-- ... -->
</el-table>
<script>
export default {
// ...
methods: {
handleEditClosed({ row, column, cell }) {
this.$nextTick(() => {
this.$refs.table.updateCell(row, column);
});
},
},
};
</script>
```
这是因为 `el-table` 内部使用了虚拟 DOM 技术,编辑器的值修改后可能无法自动触发表格的更新。手动调用 `updateCell` 方法可以强制更新单元格的显示内容。
希望这些信息对您有所帮助!
阅读全文