el-table 里面的el-input输入框不能进行实时编辑,但是点击保存数据又显示
时间: 2024-10-12 20:06:03 浏览: 58
vue鼠标在表格中移入移出input显示隐藏
`el-table` 中的 `el-input` 输入框默认并不支持实时编辑模式,它们通常是静态展示的,用户需要通过点击单元格进行交互才能修改内容。当你在表格单元格内放置了 `el-input`,点击后会进入编辑状态,此时输入的内容会被聚焦,用户可以输入新的值。不过,你需要手动触发 `input` 事件监听器或者使用 Element UI 提供的 `@cell-edit-end` 或 `@edit`` 的自定义事件,当用户完成编辑并点击“保存”按钮时,才能将表单的数据更新到后台。
例如,你可以这样处理:
```html
<template>
<el-table
:data="tableData"
@cell-edit-end="handleEditEnd"
>
<el-table-column type="index"></el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="{ row }">
<el-input v-model="row.name" placeholder="请输入姓名"></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
// ...
],
editingRow: null,
};
},
methods: {
handleEditEnd(row) {
this.$set(this.tableData, row.index, row);
this.editingRow = null; // 关闭编辑状态
}
}
};
</script>
```
在这个例子中,`handleEditEnd` 方法会在用户编辑结束后更新行数据,并关闭当前的编辑状态。
阅读全文