乔拓云建站平台不是免费的,北京 网站 优化,宜宾seo快速排名,四平英文网站建设菜鸟最近写后台管理系统#xff0c;发现不管是弹窗、还是编辑、查看、添加等功能#xff0c;真的代码都差不多#xff0c;但是每次都要重新写里面的关闭逻辑等#xff0c;菜鸟就感觉不如搞一个模版#xff0c;后面只关注于逻辑#xff0c;其他都直接来这里复制了#xf…菜鸟最近写后台管理系统发现不管是弹窗、还是编辑、查看、添加等功能真的代码都差不多但是每次都要重新写里面的关闭逻辑等菜鸟就感觉不如搞一个模版后面只关注于逻辑其他都直接来这里复制了
在编辑、查看、添加等功能中编辑中的逻辑是包含查看和添加的所以菜鸟就总结一个编辑的 文章目录 出现情况父界面子界面 出现情况
el-table:datadicListstylewidth: 100%
el-table-column typeindex width65 label序号/el-table-columnel-table-columnproplabellabel接口字段/el-table-columnel-table-columnpropvaluelabel值/el-table-columnel-table-columnpropupdateDatelabel更新时间/el-table-columnel-table-column label操作 alignlefttemplate slot-scopescopeel-tooltip effectdark content查看 placementtopi classel-icon-tickets clickseedetail(scope.row)/i/el-tooltipel-tooltip effectdark content编辑 placementtopi classel-icon-edit-outline clickopenEditFun(scope.row)/i/el-tooltipel-popconfirmtitle这是一段内容确定删除吗confirmdeleteFun(scope.row)el-tooltip slotreference effectdark content删除 placementtopi classiconfont iconshanchu/i/el-tooltip/el-popconfirm/template/el-table-column
/el-table父界面
引入
import Edit from ./dialog/edit.vue;界面
editv-ifeditshow:dialogFormVisibleeditshow:editdataeditdatacloseEventhideEdit
/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;}},},
}子界面
界面
templatediv classdialogWrapperel-dialog:titletitle:visible.syncdialogVisiblewidth710pxrefdialogBoxclassdialogBox:before-closehandleCloseclosecloseDialog:destroy-on-closetrueel-form refform :modelform :rulesrulesel-form-item labelxxxx1 propaaaael-input v-modelform.aaaa/el-input/el-form-itemel-form-item labelxxxx2 propbbbbel-select v-modelform.bbbb placeholder请选择el-optionv-foritem in recogTypeArr:keyitem.value:labelitem.label:valueitem.value/el-option/el-select/el-form-item/el-formdiv slotfooterel-button clickhandleClose关闭/el-buttonel-button clicksaveFun typeprimary保存/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
