用vue和el-element写一个表格组件,可以在在表格上直接修改表格内容并保存,点击编辑按钮,表格单元变成可编辑的输入框进行修改
时间: 2024-05-12 18:20:04 浏览: 8
以下是一个基本的表格组件示例,使用了Vue和ElementUI库,可实现在表格上直接编辑并保存,也可点击编辑按钮进行单元格修改:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="name"
label="姓名"
:editable="true"
:edit-method="editCell"
></el-table-column>
<el-table-column
prop="age"
label="年龄"
:editable="true"
:edit-method="editCell"
></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.$index)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 },
{ name: '王五', age: 25 },
{ name: '赵六', age: 28 },
],
editIndex: -1,
}
},
methods: {
editCell(row, column, cell) {
cell.children[0].focus()
},
handleEdit(index) {
this.editIndex = index
},
handleSave(index) {
this.editIndex = -1
},
},
}
</script>
```
在上面的代码中,`el-table-column`组件的`editable`属性设置为`true`,表示该列单元格可编辑,`edit-method`属性绑定一个名为`editCell`的方法,用于点击单元格时让输入框获得焦点。在操作列中,点击编辑按钮时,将`editIndex`设置为当前行的索引,表示该行单元格处于编辑状态。此时,单元格内容变为可编辑的输入框,用户可以修改内容,然后点击保存按钮,即可将修改后的内容保存到表格中。
此外,也可以使用`el-input`组件替换单元格原有的内容,实现更完整的编辑功能。具体实现方式可参考ElementUI官网文档。