这是一个网上的列子, 一表格,点击编辑时弹出层编辑这一行,点击保存时送请求的完整示例:
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column label="编辑">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-form ref="form" :model="editedData">
<el-form-item label="姓名" prop="name">
<el-input v-model="editedData.name"></el-input>
</el-form-item>
<el-form-item label="角色" prop="role">
<el-input v-model="editedData.role"></el-input>
</el-form-item>
<el-form-item label="日期" prop="date">
<el-date-picker v-model="editedData.date" type="date"></el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
tableData: [],
dialogVisible: false,
editedData: {
name: '',
role: '',
date: ''
}
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
// 发送请求获取表格数据
axios.get('/api/tableData').then(response => {
this.tableData = response.data;
}).catch(error => {
console.log(error);
});
},
handleEdit(row) {
// 弹出编辑窗口,并将当前行的数据赋值给 editedData
this.editedData = Object.assign({}, row);
this.dialogVisible = true;
},
handleSave() {
// 发送保存请求
axios.post('/api/saveData', this.editedData).then(response => {
if (response.data.success) {
// 请求成功,关闭编辑窗口并刷新表格数据
this.dialogVisible = false;
this.fetchData();
} else {
// 请求失败,提示操作错误
this.$message.error('操作失败,请稍后重试!');
}
}).catch(error => {
console.log(error);
});
}
}
};
</script>