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)
}