element-plus el-table表格组件封装记录_element plus table

昨天初步体验了一把form表单的封装,觉得还是有些浅显且有些地方没有理清,所以今天来试一试B端项目中同样常用的一个组件---el-table的二次封装,今天的封装想要达到的效果:

        1.和el-form组件一样通过传入对象的形式对table表格进行条件渲染

        2.能够在实际调用场景下通过插槽来自定义标题,提交按钮等一些小东西

        3.能够通过v-bind绑定属性实现开关组件,编辑/删除,多选框等操作按钮的显示

开局还是先准备一下前置知识:

        1.父子组件之间的数据传递方式:通过ref  通过v-model 通过v-bind 

        2.v-for v-if条件渲染

        3.插槽的基础使用

以上知识都是本次封装中需要用到的内容,不熟的话可以先去学习这些,否则我文笔逻辑有限可能阅读会有障碍.

------------------------------------------------------------分割线------------------------------------------------------------

表格基本内容展示:

开始封装的第一步肯定是要创建一个文件然后从element-plus中找到心仪的表格复制粘贴

这个看起来简单明了,结构肯定也很简单,就他了,我们来看一下他的结构:

el-table标签我就简单理解为装有表格的盒子,上面:data绑定的是表格中的数据,el-table-column标签则是决定了表格每一列的内容是什么,有几个el-table-column就有多少列,label则是每一列的标题,图中箭头和方框则是他们的对应关系.不难看出,tableData中的对象有几个属性,表格就有几列.因此我们可以根据他属性的数量v-for循环生成el-table-column.

到此我遇到了本次尝试中的第一个问题:如何动态的拿到数据中的属性且v-for绑定上去

解决方案如上图:首先定义一个空数组tableNameList,循环遍历tableData中的第一个对象中的属性(这里有些偷懒,默认的认为实际开发中后端传来的数据是规整的,每个对象中的属性是相同的)把他装入tableNameList中.

还有一个label属性没有确定,我把他也变成了一个配置文件也就是tableLabel,这样在上文中处理tableNameList时就可以把label也顺便确定

处理完的tableNameList也贴一下

 然后就可以按照tableNameList进行v-for循环了