vue3二次封装element-ui中的table组件

为什么要做这件事

借助封装table组件的过程来巩固一下vue3相关知识点。

组件有哪些配置项

1. options:表格的配置项
2. data: 表格数据源
3. elementLoadingText：加载文案
4. elementLoadingSpinner：加载图标
5. elementLoadingBackground：背景遮罩的颜色
6. elementLoadingSvg：加载图标（svg）
7. elementLoadingSvgViewBox：加载图标是svg的话，配置项
8. editIcon：编辑图标
9. isEditRow：是否支持编辑
10. editRowIndex：编辑行的标识符
11. pagination：是否支持分页
12. paginationAlign：分页对齐方式
13. currentPage：当前页数
14. pageSize：每页显示条目个数
15. pageSizes：每页显示个数选择器的选项设置
16. total：总条目数

实现过程

首先，将一个普通的element-plus中的table组件引入进来，表格数据源就是我们通过父组件传递进来的data，所以我们使用defineProps来定义，并且它的数据类型是一个数组；同时我们遵循单向数据流的原则，使用lodash中的深拷贝方法将data拷贝一份出来赋值给变量tableData，将tableData传递给element-plus中的table组件，用来渲染数据。

// 子组件 m-table-copy

 父组件在使用这个自定义组件的时候应该这么使用：

 这样页面上就能够显示出来我们的数据了：

第一步完成了，我们接着再分析，还有什么是可以封装的呢？仔细看上面的代码，是不是有了想法？是的，label、width、prop这些也是可以放在一个配置项里面的，那我们继续来进行封装：

// 父组件准备好的数据结构
let options = [
  {
    prop: 'date',
    label: '日期',
    align: 'center',
    slot: 'date',
    editable: true,
    width: '230'
  },
  {
    prop: 'name',
    label: '姓名',
    align: 'center',
    slot: 'name'
  },
  {
    prop: 'address',
    label: '地址',
    align: 'center',
    editable: true
  },
  {
    label: '操作',
    align: 'center',
    action: true
  }
]

 一般来说，表格都会配置一下loading状态，所以我们继续封装，将loading相关的配置项也添加进来：

完整代码