vue实现编辑弹框
Vue 实现编辑弹框的实现方法
使用组件化方式封装弹框
创建一个独立的 EditDialog.vue 组件，包含表单和基础交互逻辑：
<template>
<el-dialog :title="title" :visible.sync="visible" @close="handleClose">
<el-form :model="formData" :rules="rules" ref="form">
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<!-- 其他表单字段 -->
</el-form>
<div slot="footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
visible: Boolean,
editData: Object
},
data() {
return {
formData: {},
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
}
}
},
watch: {
editData: {
immediate: true,
handler(val) {
this.formData = {...val}
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.$emit('confirm', this.formData)
this.visible = false
}
})
},
handleClose() {
this.$emit('update:visible', false)
}
}
}
</script>父组件调用方式
在父组件中引入并使用编辑弹框：
<template>
<div>
<el-button @click="showEditDialog">编辑</el-button>
<edit-dialog
:visible.sync="dialogVisible"
:edit-data="currentItem"
@confirm="handleConfirm"
/>
</div>
</template>
<script>
import EditDialog from './EditDialog.vue'
export default {
components: { EditDialog },
data() {
return {
dialogVisible: false,
currentItem: null,
list: []
}
},
methods: {
showEditDialog(item) {
this.currentItem = item
this.dialogVisible = true
},
handleConfirm(formData) {
// 处理提交逻辑
const index = this.list.findIndex(item => item.id === formData.id)
this.list.splice(index, 1, formData)
}
}
}
</script>表单验证配置
在对话框组件中配置验证规则：
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
],
email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
]
}动态控制弹框标题
根据操作类型显示不同标题：
computed: {
title() {
return this.editData.id ? '编辑内容' : '新增内容'
}
}关闭时重置表单
在对话框关闭时重置表单状态：
handleClose() {
this.$refs.form.resetFields()
this.$emit('update:visible', false)
}
