elementui 的 dialog 常用逻辑总结

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

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

文章目录

出现情况

html 复制代码
<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>

父界面

引入

js 复制代码
import Edit from './dialog/edit.vue';

界面

html 复制代码
<edit
  v-if="editshow"
  :dialogVisible="editshow"
  :editdata="editdata"
  @closeEvent="hideEdit"
></edit>

变量 和 函数

js 复制代码
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;
      }
    },
  },
}

子界面

界面

html 复制代码
<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>

变量 和 函数

js 复制代码
<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>
相关推荐
海天胜景3 天前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
海天胜景3 天前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
喜欢敲代码的程序员4 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w9089258594 天前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
hackchen4 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦4 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想4 天前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景4 天前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
满楼、14 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
海天胜景14 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui