Vue+Element 用同一个el-dialog弹框完成 新增 编辑 详细

在Vue中，可以通过一个el-dialog组件来实现新增、编辑和详情显示的功能。通过控制el-dialog的显示与隐藏以及传递不同的数据来实现不同的操作。

以下是一个简单的例子：

<template>
  <div>
    <!-- 新增/编辑/详情显示的对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <!-- 表单内容 -->
      <el-form :model="form">
        <el-form-item label="名称">
          <el-input v-model="form.name" :disabled="isView"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.description" :disabled="isView"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!isView" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
 
    <!-- 触发对话框的按钮 -->
    <el-button type="primary" @click="addItem">新增</el-button>
    <!-- 其他按钮触发编辑或详情显示的逻辑 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框的显示与隐藏
      dialogTitle: '', // 对话框的标题
      isView: false, // 是否为查看详情模式
      form: { // 表单数据
        name: '',
        description: ''
      }
    };
  },
  methods: {
    // 新增项目
    addItem() {
      this.dialogTitle = '新增项目';
      this.isView = false;
      this.dialogVisible = true;
      this.resetForm();
    },
    // 编辑项目
    editItem(item) {
      this.dialogTitle = '编辑项目';
      this.isView = false;
      this.dialogVisible = true;
      this.form = { ...item }; // 或者使用 this.form = Object.assign({}, item);
    },
    // 查看详情
    viewItem(item) {
      this.dialogTitle = '项目详情';
      this.isView = true;
      this.dialogVisible = true;
      this.form = { ...item };
    },
    // 提交表单
    submitForm() {
      // 这里添加保存或更新逻辑
      console.log('Form submitted:', this.form);
      this.dialogVisible = false;
    },
    // 重置表单
    resetForm() {
      this.form = {
        name: '',
        descriptio