前端内部技术分享---前端组件之表格组件的封装与使用（Vue3）

业务背景

在我们接触的项目中，PC端的项目中基本上百分之60或以上，都会用到表格，我们最常用的 就是element-plus 组件库，相信大家都对el-table 都比较熟悉了，但是在许许多多大同小异的界面中，每次都要写很多重复的代码，不仅容易出错，而且效率不高。况且很多项目大都是时间紧、任务重、有时候需求变化频繁，一改就是好几个界面。

那么，我们能不能把这些重复的，没有技术含量的工作，抽离组件，通过一个简单的json 配置就能实现这些功能，岂不是就能早点下班了。

组件封装的原则

1. 首先梳理组件的功能，明确那些功能是要放进组件内的，梳理出功能大纲；
2. 功能大纲出来后，需要考虑每个功能模块的使用方法，怎样封装，才能让使用者，通过简单的配置，就可以使用，甚至可以让不会代码的人都能使用；
3. 二次封装，原有的事件和属性，需要全部继承（v-bind="attrs" 和 v-on="listeners"）；
4. 除了定制性的功能，还需要有预留自定义的扩展功能（slot 和 modelValue）；
5. 命名需要做到见文知意；
6. 封装的组件代码内部一定要遵循功能单一、可扩展等原则

需要掌握的技术

vue: slot插槽的使用、defineProps、defineEmits、defineExpose、wacth、computed；

**element-plus:**el-table的使用、v-bind="attrs" 和 v-on="listeners"、el-pagination、el-upload、el-form等，这里看封装的组件业务复杂程度，不再展开；

以封装表格组件为案例

第一步： 梳理组件的功能大纲

​​​​​​​