el-dialog实现新增el-table-column的数据
时间: 2023-07-22 19:17:00 浏览: 153
要实现在 `el-dialog` 中新增 `el-table-column` 的数据,你可以按照以下步骤进行:
1. 在 `el-dialog` 中添加表单元素,例如输入框、下拉框等,用于填写新增数据的各个字段。
2. 当用户提交新增数据时,将表单数据整合成一个对象,并将该对象添加到 `el-table` 的数据源中。
代码示例:
```javascript
// 定义表单数据对象
let formData = {
name: '',
age: '',
gender: ''
};
// 监听表单提交事件
onSubmit() {
// 将表单数据整合成一个对象
let newData = {
name: this.formData.name,
age: this.formData.age,
gender: this.formData.gender
};
// 将新增数据添加到表格数据源中
this.tableData.push(newData);
// 关闭对话框
this.dialogVisible = false;
}
```
3. 在 `el-table` 中添加 `el-table-column` 组件,并将该组件的 `prop` 属性设置为新增数据对象中对应字段的名称,以展示新增数据。
代码示例:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
```
通过以上步骤,你可以在 `el-dialog` 中新增 `el-table-column` 的数据,并将其展示在 `el-table` 中。
阅读全文