el-dialog open事件

el-dialog 是Element-UI中的一个弹窗组件，在使用时可以利用它提供的open事件来实现弹窗打开时的一些操作。 open事件是dialog打开时触发的事件，我们可以对弹窗在打开时的一些参数和操作进行设置、调整或处理。

当一个el-dialog弹窗打开时，其open事件将会在弹窗显示之前被触发。我们可以通过以下方式来监听弹窗的打开事件：

1.在el-dialog标签中绑定v-on:open属性，赋值为我们在Vue实例中定义的函数名称。

例如：

<el-dialog
title="弹窗标题"
:visible.sync="dialogVisible"
v-on:open="handleOpen">
<!-- 弹窗内容 -->
</el-dialog>

2.在Vue实例中使用methods属性定义响应函数，在函数中添加我们需要执行的操作。

例如：

data () {
return {
dialogVisible: false
}
},
methods: {
handleOpen () {
console.log('弹窗已打开')
}
}

在触发open事件时，handleOpen函数将会被执行，我们可以在这里进行一些列的操作，比如操作DOM元素、发送请求、改变弹窗的属性等等。

例如，我们可以在弹窗打开时，更新数据并自动填充弹窗表单：

data () {
return {
dialogVisible: false,
formData: {
name: '',
age: ''
}
}
},
methods: {
handleOpen () {
// 更新数据
this.formData.name = '张三'
this.formData.age = '18'
// 自动填充弹窗表单
this.$refs.dialogForm.setFieldsValue(this.formData)
}
}

在上述例子中，我们通过给表单的ref属性值为dialogForm来获取到表单的实例，然后在open事件中调用它的setFieldsValue方法来自动填充表单。这样，就可以在打开弹窗的时候，自动为表单添加默认数据，提升用户的体验效果。

总之，在使用el-dialog组件时，我们可以通过open事件来监听弹窗打开时的事件，并对这一事件进行一系列操作，优化用户体验，提高组件的可用性。