vue3 共用一个 el-dialog弹框组件 实现新增和编辑 怎么写代码
时间: 2023-11-09 09:12:30 浏览: 178
vue项目中仿element-ui弹框效果的实例代码
可以使用 `props` 来控制弹框的内容和行为。具体实现方式如下:
1. 在父组件中,定义一个 `data` 对象,用于控制弹框的显示和隐藏状态,以及传递给子组件的数据。
```javascript
data() {
return {
showDialog: false, // 控制弹框的显示和隐藏
dialogData: null // 传递给子组件的数据
}
}
```
2. 在父组件中,定义一个方法用于打开弹框,并传递需要编辑的数据。
```javascript
openDialog(data) {
this.dialogData = data // 将需要编辑的数据传递给子组件
this.showDialog = true // 打开弹框
}
```
3. 在父组件中,使用 `el-dialog` 组件来渲染弹框,并通过 `props` 传递必要的参数。
```html
<el-dialog :visible.sync="showDialog">
<!-- 子组件 -->
<DialogForm :data="dialogData" @success="onSuccess" />
</el-dialog>
```
4. 在子组件中,通过 `props` 接收父组件传递过来的数据,并根据数据是否存在判断是新增还是编辑操作。
```javascript
props: {
data: {
type: Object,
default: null
}
},
computed: {
isAdd() {
return !this.data // 如果没有传递数据,则为新增操作
}
}
```
5. 在子组件中,通过 `template` 来渲染表单,根据 `isAdd` 属性来决定是否显示新增和编辑的不同按钮。
```html
<template>
<el-form>
<!-- 表单项 -->
...
<!-- 操作按钮 -->
<el-button v-if="isAdd" @click="onAdd">新增</el-button>
<el-button v-else @click="onEdit">编辑</el-button>
</el-form>
</template>
```
6. 在子组件中,定义 `onAdd` 和 `onEdit` 方法来处理新增和编辑操作,操作完成后通过 `$emit` 发送 `success` 事件给父组件,关闭弹框。
```javascript
methods: {
onAdd() {
// 发送新增操作请求
...
// 关闭弹框
this.$emit('success')
},
onEdit() {
// 发送编辑操作请求
...
// 关闭弹框
this.$emit('success')
}
}
```
这样,就可以通过一个共用的弹框组件来实现新增和编辑操作了。
阅读全文