vue结合element如何实现点击table表格按钮时,展示两个对话框表单
时间: 2024-06-09 16:09:20 浏览: 264
可以通过以下步骤实现:
1. 在表格中添加一个操作列,其中包含需要点击的按钮。
2. 在按钮的点击事件中,通过 `this.$confirm` 方法打开一个确认框,其中包含需要展示的表单。
3. 在确认框中,使用 `<el-tabs>` 和 `<el-tab-pane>` 组件来展示两个表单。
下面是一个简单的示例代码:
```vue
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template #default="{row}">
<el-button type="primary" @click="showDialog(row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" title="编辑" width="30%">
<el-tabs>
<el-tab-pane label="基本信息">
<el-form :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="详细信息">
<el-form :model="form" label-width="80px">
<el-form-item label="地址">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<div slot="footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveData">保 存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, address: '北京市', phone: '13812345678' },
{ name: '李四', age: 25, address: '上海市', phone: '13912345678' },
{ name: '王五', age: 30, address: '广州市', phone: '13612345678' },
],
dialogVisible: false,
form: {
name: '',
age: '',
address: '',
phone: '',
},
};
},
methods: {
showDialog(row) {
// 将表格行数据赋值给表单
this.form = { ...row };
this.dialogVisible = true;
},
saveData() {
// 保存表单数据
// ...
this.dialogVisible = false;
},
},
};
</script>
```
在上面的示例代码中,我们首先在表格中添加了一个操作列,并在其中添加了一个“编辑”按钮。然后在按钮的点击事件中,通过 `this.$confirm` 方法打开了一个确认框,并在其中使用 `<el-tabs>` 和 `<el-tab-pane>` 组件展示了两个表单。
在确认框中,我们使用了 `slot="footer"` 来自定义底部按钮,其中包含一个“保存”按钮和一个“取消”按钮。在“保存”按钮的点击事件中,可以将表单数据保存到服务器,并关闭确认框。
阅读全文