基于element-ui中table表格组件进行二次封装

基于element-ui中table表格组件进行二次封装

在平时开发的时候很多情况都会使用到表格和分页功能，所以根据用到的表格功能做一个基础的封装并记录下来，如果有其他功能需要添加直接在此基础上进行扩展即可。

基础功能

1、 表格内容的正常显示
2、 表格内容需要处理后显示（如时间戳转换，枚举值转换等）
3、 表格添加标签、按钮或者操作列内容显示
4、 全选功能
5、 其他原有的属性，如宽度，内容对齐等等属性可以值接使用
6、待扩展

封装组件

1、 基于element-ui的table组件和Pagination组件进行二次封装的组件eleTable
2、 抽离出请求和查询条件的mixins混合
3、 在组件中使用和传入数据

下面分别看下每个组件的完整代码：

1、 基于element-ui的table组件和Pagination组件进行二次封装的组件eleTable

eleTable组件的封装引入了element组件库中的组件，并使用了v-bind 和 v-on来进行对组件间的传参，可以把使用时不用处理的参数直接传递到引入的组件内部，保留组件的属性和功能。另外对于需要特殊处理的内容（如：显示按钮，不同的内容等）使用函数式组件进行渲染。eleTable.vue组件代码如下：

2、 抽离出请求和查询条件的mixins混合

我们的表格一般还会有各种筛选条件，所以吧这些统一的查询和重置方法提出来成为一个mixins混合，在使用的组件里面引入（如果后端接口返回的数据比较统一，也可以将查询翻页等功能直接封装在表格组件中，根据业务需要封装）。下面是mixins.js代码：

export default {
 data() {
   return {
     // 分页
     pagination: {
       pageNum: 1,
       pageSize: 10,
       total: 4,
       pageSizes: [10, 20, 30, 40, 50],
     },
     // 表格数据
     dataList: [],
     // 返回参数字段名
     dataKey: 'dataKey',
   }
 },
 methods: {
   handleQuery() {
     const { pageNum, pageSize } = this.pagination
     // tableListUrl 封装的接口名
     this.$api(this.tableListUrl, {
       ...this.formData,
       pageParam: {
         pageNum,
         pageSize,
       },
     }).then(res => {
       if (!res) return
       this.pagination.total = res.pageParam ? res.pageParam.total : 0
       this.dataList = res[this.dataKey]
     })
   },

   // 查询列表
   queryHandle() {
     const data = this.formData
     // 时间处理
     if (data.timeRange && data.timeRange.length !== 0) {
       data.startTime = data.timeRange[0]
       data.endTime = data.timeRange[1]
     } else {
       data.startTime = null
       data.endTime = null
     }
     this.pagination.pageNum = 1
     this.handleQuery()
   },

   // 重置列表
   resetHandle() {
     const data = this.formData
     Object.keys(data).forEach(key => {
       data[key] = null
     })
     this.pagination.pageNum = 1
     this.handleQuery()
   },

   // 改变页码
   handlePageChange(page) {
     this.pagination.pageNum = page
     this.handleQuery()
   },

   // 改变页数
   handleSizeChange(size) {
     this.pagination.pageSize = size
     this.pagination.pageNum = 1
     this.handleQuery()
   },
 },
}

3、 在组件中使用和传入数据

在使用封装好的组件时，直接引入eleTable组件和mixins文件，并传入相应的数据和属性即可。详细代码如下：

使用效果

时间可以进行转换成想展示的格式，内容可以添加事件进行触发，支持多选等等功能。