前端内部技术分享---前端组件之表格组件的封装与使用（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等，这里看封装的组件业务复杂程度，不再展开；

以封装表格组件为案例

第一步： 梳理组件的功能大纲（可能不包括全部业务场景，但是都i开放了自定义的接口，从而支持全部的业务场景）