用vue和el-element写一个表格组件,可以在在表格上直接修改表格内容并保存
时间: 2024-05-12 12:20:06 浏览: 7
以下是一个简单的示例:
```
<template>
<el-table :data="tableData" @cell-click="handleCellClick">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 25, gender: 'Male', address: '123 Main St' },
{ name: 'Jane', age: 30, gender: 'Female', address: '456 Oak Ave' },
{ name: 'Bob', age: 40, gender: 'Male', address: '789 Maple Rd' }
],
editedRow: null // 用于存储当前正在编辑的行的索引
}
},
methods: {
handleCellClick(row, column, cell, event) {
// 如果当前行不是正在编辑的行,就开始编辑
if (this.editedRow !== row) {
this.editedRow = row
cell.querySelector('input').focus()
}
},
saveRow(row) {
// 保存行数据
this.editedRow = null
// 可以将数据发送到后端进行保存
}
}
}
</script>
```
在这个示例中,我们使用`el-table`组件来展示数据,并且通过`@cell-click`事件来监听单元格的点击事件。当单元格被点击时,我们会检查当前行是否已经在编辑中,如果不是,就开始编辑。当用户完成编辑并点击保存时,我们可以将数据发送到后端进行保存。