用云速成美站怎么做网站手机百度极速版app下载安装
业务背景
在我们接触的项目中，PC端的项目中基本上百分之60或以上，都会用到表格，我们最常用的 就是element-plus 组件库，相信大家都对el-table 都比较熟悉了，但是在许许多多大同小异的界面中，每次都要写很多重复的代码，不仅容易出错，而且效率不高。况且很多项目大都是时间紧、任务重、有时候需求变化频繁，一改就是好几个界面。
那么，我们能不能把这些重复的，没有技术含量的工作，抽离组件，通过一个简单的json 配置就能实现这些功能，岂不是就能早点下班了。
组件封装的原则
- 首先梳理组件的功能，明确那些功能是要放进组件内的，梳理出功能大纲；
- 功能大纲出来后，需要考虑每个功能模块的使用方法，怎样封装，才能让使用者，通过简单的配置，就可以使用，甚至可以让不会代码的人都能使用；
- 二次封装，原有的事件和属性，需要全部继承（v-bind="$attrs" 和 v-on="$listeners"）；
- 除了定制性的功能，还需要有预留自定义的扩展功能（ slot 和 modelValue）；
- 命名需要做到见文知意；
- 封装的组件代码内部一定要遵循功能单一、可扩展等原则
需要掌握的技术
vue: slot插槽的使用、defineProps、defineEmits、defineExpose、wacth、computed；
element-plus: el-table的使用、v-bind="$attrs" 和 v-on="$listeners"、el-pagination、el-upload、el-form等，这里看封装的组件业务复杂程度，不再展开；
以封装表格组件为案例
第一步： 梳理组件的功能大纲