二次封装 element-ui，让代码更优雅

element-ui 本身就提供了许多强大的组件，那么为什么还要进行二次封装呢？在日常的开发过程中，部分模块重复性比较强，这个时候就会产生大量重复的代码。这些模块的样式基本上是比较固定的，而且实现的功能也比较简单，所以我们可以对这些模块进行二次封装，将其封装成一个独立的组件，然后在需要的时候直接使用这个组件，这样就可以大大减少代码量，提高开发效率。

二次封装 element-ui 组件的好处有很多。首先，可以减少代码量，提高开发效率。其次，可以提高代码的可维护性，因为将重复的代码封装成一个组件后，只需要维护这个组件就可以了。第三，可以提高代码的可复用性，因为将重复的代码封装成一个组件后，就可以在不同的项目中重复使用。

下面我们就来对 element-ui 中的几个组件进行二次封装。

1. 弹出框组件

弹出框组件是一个非常常用的组件，我们可以将其封装成一个独立的组件，以便在需要的时候直接使用。

// 弹出框组件
import { ElMessageBox } from 'element-ui'

export default {
  methods: {
    // 显示弹出框
    showMessageBox(options) {
      ElMessageBox(options)
    },

    // 确认弹出框
    confirmMessageBox(options) {
      return ElMessageBox.confirm(options)
    },

    // 提示弹出框
    alertMessageBox(options) {
      ElMessageBox.alert(options)
    },

    // 输入框弹出框
    promptMessageBox(options) {
      return ElMessageBox.prompt(options)
    },
  }
}

2. 表格组件

表格组件也是一个非常常用的组件，我们可以将其封装成一个独立的组件，以便在需要的时候直接使用。

// 表格组件
import { ElTable } from 'element-ui'

export default {
  components: {
    ElTable,
  },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => [],
    },

    // 表格列
    tableColumns: {
      type: Array,
      default: () => [],
    },

    // 表格分页参数
    tablePagination: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        total: 0,
      }),
    },
  },
}

3. 分页组件

分页组件也是一个非常常用的组件，我们可以将其封装成一个独立的组件，以便在需要的时候直接使用。

// 分页组件
import { ElPagination } from 'element-ui'

export default {
  components: {
    ElPagination,
  },
  props: {
    // 当前页码
    currentPage: {
      type: Number,
      default: 1,
    },

    // 每页显示条数
    pageSize: {
      type: Number,
      default: 10,
    },

    // 总条数
    total: {
      type: Number,
      default: 0,
    },
  },
}

以上只是对 element-ui 中部分组件的二次封装示例，开发人员可以根据自己的实际需要对其他组件进行二次封装。二次封装 element-ui 组件可以大大减少代码量，提高开发效率，同时使代码更加优雅。