elementui表格点击返回输入之前的内容
时间: 2024-02-27 19:56:53 浏览: 60
vue+elementUI实现表格关键字筛选高亮
如果您是想在 ElementUI 表格中,当用户点击编辑后,可以在取消编辑时返回输入之前的内容,可以通过以下步骤实现:
1. 在 table 的 column 中,添加 scoped slot "edit",用于渲染编辑时的表单组件,如 input、select 等。
2. 在 scoped slot "edit" 中,绑定表单组件的 value 属性为当前行数据的对应属性值,如:
```
<el-input v-model="scope.row.name"></el-input>
```
3. 在 table 的 @edit-disabled、@edit-closed 事件中,分别将当前行数据的对应属性值重置为编辑前的值,如:
```
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<template v-if="!scope.row.editable">
{{ scope.row.name }}
</template>
<template v-else>
<el-input v-model="scope.row.name"></el-input>
</template>
</template>
</el-table-column>
<el-table @edit-disabled="cancelEdit" @edit-closed="cancelEdit">
...
</el-table>
...
methods: {
cancelEdit(scope) {
scope.row.name = scope.row._name;
}
}
```
这样,在用户取消编辑时,就会将当前行数据的对应属性值重置为编辑前的值。
阅读全文