elementui通过弹出框修改表格中多行数据的某一列数据
时间: 2024-05-08 09:22:04 浏览: 12
可以通过以下步骤实现:
1. 在表格中选中需要修改的多行数据,可以使用`selection-change`事件监听选中状态的变化,在事件处理函数中获取当前选中的多行数据的ID等信息。
2. 弹出修改框,可以使用`el-dialog`组件,设置`visible`属性为`true`来显示弹出框。
3. 在弹出框中设置需要修改的列的输入框,可以使用`el-input`组件。
4. 在弹出框中设置提交按钮,点击提交按钮时,可以使用`el-message`组件显示提交结果,并将修改后的数据提交给后台进行保存。
以下是一个示例代码:
```html
<template>
<div>
<el-button type="primary" @click="showEditDialog">修改</el-button>
<el-table :data="tableData" :row-key="row => row.id" @selection-change="handleSelectionChange">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-dialog :visible.sync="editDialogVisible" title="批量修改" @close="handleEditDialogClose">
<el-form :model="editForm" ref="editForm">
<el-form-item label="年龄">
<el-input v-model="editForm.age"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleEditSubmit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: "张三", age: 20 },
{ id: 2, name: "李四", age: 25 },
{ id: 3, name: "王五", age: 30 }
],
editDialogVisible: false,
editForm: {
age: ""
},
selectedRows: []
};
},
methods: {
showEditDialog() {
if (this.selectedRows.length === 0) {
this.$message.warning("请选择需要修改的数据");
return;
}
this.editDialogVisible = true;
},
handleSelectionChange(selection) {
this.selectedRows = selection;
},
handleEditDialogClose() {
this.$refs.editForm.resetFields();
},
handleEditSubmit() {
const ids = this.selectedRows.map(row => row.id);
const data = { age: this.editForm.age };
// 发送修改请求
this.$http.post("/api/batch-update", { ids, data }).then(response => {
this.$message.success("修改成功");
this.editDialogVisible = false;
// 更新表格数据
this.tableData = this.tableData.map(row => {
if (ids.indexOf(row.id) !== -1) {
return { ...row, ...data };
} else {
return row;
}
});
}).catch(error => {
this.$message.error("修改失败");
});
}
}
};
</script>
```