elementui 的 dialog 常用逻辑总结

菜鸟最近写后台管理系统，发现不管是弹窗、还是编辑、查看、添加等功能，真的代码都差不多，但是每次都要重新写里面的关闭逻辑等，菜鸟就感觉不如搞一个模版，后面只关注于逻辑，其他都直接来这里复制了！

在编辑、查看、添加等功能中，编辑中的逻辑是包含查看和添加的，所以菜鸟就总结一个编辑的！

vue3 的 element plus 的 dialog 总结可以见我的另一个博客：element plus 使用细节

出现情况

<el-table
  :data="dicList"
  style="width: 100%"
>
  <el-table-column type="index" width="65" label="序号"></el-table-column>
  <el-table-column
    prop="label"
    label="接口字段"
  ></el-table-column>
  <el-table-column
    prop="value"
    label="值"
  ></el-table-column>
  <el-table-column
    prop="updateDate"
    label="更新时间"
  ></el-table-column>
  <el-table-column label="操作" align="left">
    <template slot-scope="scope">
      <el-tooltip effect="dark" content="查看" placement="top">
        <i class="el-icon-tickets" @click="seedetail(scope.row)"></i>
      </el-tooltip>
      <el-tooltip effect="dark" content="编辑" placement="top">
        <i class="el-icon-edit-outline" @click="openEditFun(scope.row)"></i>
      </el-tooltip>
      <el-popconfirm
        title="这是一段内容确定删除吗？"
        @confirm="deleteFun(scope.row)"
      >
        <el-tooltip slot="reference" effect="dark" content="删除" placement="top">
          <i class="iconfont iconshanchu"></i>
        </el-tooltip>
      </el-popconfirm>
    </template>
  </el-table-column>
</el-table>

父界面

引入

import Edit from './dialog/edit.vue';

界面

<edit
  v-if="editshow"
  :dialogVisible="editshow"
  :editdata="editdata"
  @closeEvent="hideEdit"
></edit>

变量 和 函数

export default {
  data() {
    return {
      dicList: null,
      // 编辑
      editshow: false,
      editdata: {},
    }
  },
  components: {
    Edit,
  },
  created: {
  	// 请求 dicList
  },
  methods: {
    // 打开编辑
    openEditFun(scope) {
      // table 里面的scope
      this.editshow = true;
      this.editdata = scope;
    },
    // 关闭编辑  第一种
    hideEdit(msg) {  // 这里msg就是为了区分 直接点关闭 和 保存后的关闭 做区分 [查看弹窗可不要]
      if (msg == false) {
        this.editshow = false;
      } else if (msg == true) {
        // TODO:保存后，重新请求  --》 最好是成功直接修改前端数据，并提示成功
        请求逻辑
        this.editshow = false;
      }
    },
    // 关闭编辑  第二种
    hideedit(msg, data) {
      if (msg == false) {
        this.editshow = false;
      } else if (msg == true) {
        this.dicList = data;
        this.editshow = false;
      }
    },
  },
}

子界面

界面

<template>
  <div class="dialogWrapper">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="710px"
      ref="dialogBox"
      class="dialogBox"
      :before-close="handleClose"
      @close="closeDialog"
      :destroy-on-close="true"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="xxxx1" prop="aaaa">
          <el-input v-model="form.aaaa"></el-input>
        </el-form-item>
        <el-form-item label="xxxx2" prop="bbbb">
          <el-select v-model="form.bbbb" placeholder="请选择">
            <el-option
              v-for="item in recogTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button @click="saveFun" type="primary">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

变量 和 函数

<script>
// 引入api
import {
  api,
} from "@/api/api.js";

// 引入验证规则
import {
  validateNumInEight2,
} from "@/tools/Validate.js";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editdata: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      // 弹窗标题
      title: "算法编辑",
      // 绑定数据
      form: null,
      // 验证规则
      rules: {
        aaaa: [
          { required: true, message: "xxxx1", trigger: "blur" },
          { validator: validateNumInEight2, trigger: "blur" },
        ],
        bbbb: [
          { required: true, message: "xxxx2", trigger: "blur" },
        ],
      },
      // 下拉框
      recogTypeArr: [
        {
          value: 'value1',
          label: 'label1'
        },
        {
          value: 'value2',
          label: 'label2'
        }
      ],
    }
  },
  created() {
    this.form = _.cloneDeep(this.editdata); // 防止修改，改变父界面数据
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("closeEvent", false);
    },
    closeDialog() {
      this.$refs.dialogBox.resetFields();
    },
    // 编辑保存
    saveFun() {
      // api
      api({}).then(res => {
        if (res.status == '200') {
          // 第一种
          this.$emit("closeEvent", true);
          // 第二种 --》 性能更好
          this.$emit("closeEvent", true, this.form);
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(err => {
        console.log(err);
      })
    }
  }
}
</script>