Element中el-table和MessageBox组件的二次封装

Element组件二次封装实践：el-table与MessageBox

最新推荐文章于 2025-09-02 10:17:00 发布

原创

最新推荐文章于 2025-09-02 10:17:00 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

本文主要分享了在Vue项目中，为提高效率对ElementUI的el-table和MessageBox组件进行二次封装的过程。通过封装简化了代码，方便了项目的频繁使用。详细展示了封装的代码示例，包括el-table组件的改造以及MessageBox的封装。同时，讨论了数据处理的多种方法，并邀请读者在评论区交流优化建议。

[Talk is cheap. Show me the code]

不想看理论知识请直接移步最后代码示例。

一、封装目的

在使用ElementUI过程中，发现一些组件的代码量还是过多，并且项目中频繁使用，所以就对组件进行了二次封装，并记录在博客中，欢迎共同讨论学习。

二、代码示例

2.1 MessageBox的封装

/**
   * 封装 在一个叫commonFn的公共服务里面
   * @param {*弹窗提示信息} msgContent
   * @param {*弹窗标题} msgTitle
   * @param {*弹窗类型:
   * 'warning',
   * 'success ',
   * 'info',
   * 'error'
   * 四种类型
   * } msgType
   */
    MessageBox(
    msgContent = '此操作将永久删除此条数据, 是否继续?',
    msgTitle = '提示信息',
    msgType = 'warning') {
    var msgBox = MessageBox.confirm(msgContent, msgTitle, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: msgType
    })
        return msgBox
     }

/**
   * 哪里需要在哪里调用即可。
   *common是一个公共的函数服务，链式调用即可。
   *参数与封装的相对应。
   */
   commonFn.MessageBox('ds', '23', 'success').then(()=> {
     console.log('确认回调')
   }).catch(() => {
     console

最低0.47元/天解锁文章