el-dialog和el-table结合增删改查，el-dialog共用增加修改

表格部分:

<el-table-column label="编号" prop="id"> </el-table-column>
      <el-table-column label="姓名" prop="name"> </el-table-column>
      <el-table-column label="生日" prop="bir"> </el-table-column>
      <el-table-column label="性格" prop="sex"> </el-table-column>
      <el-table-column label="地址" prop="address"> </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

对话框部分:

<el-dialog
      :title="dialogName"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="clearData"
    >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.bir"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input
            v-model="form.address"
            autocomplete="off"
            type="textarea"
            :maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">重置</el-button>
        <el-button type="primary" @click="onSubmit">保存信息</el-button>
      </div>
    </el-dialog>

方法:注意在对话框关闭之后（不管是提交关闭还是右上角关闭）一定要回调清理数据，否则会残留数据

methods: {
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(row)); //深拷贝 将表单数据回显
    },
    handleDelete(index, row) {
      this.$http
        .get("http://localhost:8989/user/delete?id=" + row.id)
        .then((res) => {
          if (res.data.status) {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            this.findAll()
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    findAll() {
      this.$http.get("http://localhost:8989/user/findAll").then((res) => {
        this.tableData = res.data;
      });
    },
    onSubmit() {
      this.$http
        .post("http://localhost:8989/user/saveOrUpdate", this.form)
        .then((res) => {
          //添加或者修改员工
          if (res.data.status) {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            this.dialogFormVisible = false; //关闭对话框
            this.findAll(); //将表格数据刷新
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    clearData() {
      //在表单关闭时的回调，即使尚未对数据修改/添加依旧需要将原来的数据清理掉
      this.form = {};
    },
  },
  created() {
    this.findAll();
  },
};