elementui 的 dialog 常用逻辑总结

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

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

出现情况

<el-table:data="dicList"style="width: 100%"
><el-table-column type="index" width="65" label="序号"></el-table-column><el-table-columnprop="label"label="接口字段"></el-table-column><el-table-columnprop="value"label="值"></el-table-column><el-table-columnprop="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-popconfirmtitle="这是一段内容确定删除吗？"@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';

界面

<editv-if="editshow":dialogFormVisible="editshow":editdata="editdata"@closeEvent="hideEdit"
></edit>

变量 和 函数

export default {data() {return {dicList: null,// 编辑editshow: false,editdata: {},}},components: {Edit,},created: {// 请求 dicList},methods: {// 打开编辑openEditFun(scope) {// table 里面的scopethis.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-optionv-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() {// apiapi({}).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>