基于 antd 风格的 element-table + pagination 的二次封装

前言

本次封装基于 antd 风格, 实现高度可配置的表格封装配置。本来想通过 vue.extends 去封装的，奈何几个月没写过 vue ，而且对 vue 的 extends 不熟悉所以放弃了...

之前有小伙伴确实引用了我的代码，发现封装出现了一些纰漏，对此十分抱歉，之前封装的太仓促了。几个月前的代码，现在重新封装又有了新的体会。

更新时间 【2018.11.09】，效果如下：

image

API 说明

• columns : 必选, 列描述数据对象， Array
• dataSource : 必选, 数据数组
• options : 必选, 表格参数控制, maxHeight、stripe 等等..
• fetch : 获取数据的 Function
• pagination : 分页信息，不传则不显示分页
• row-click ：当某一行被点击时会触发该事件
• selection-change : 当选择项发生变化时会触发该事件
• 其他的 api 可以自行添加

其他说明我在代码注释中写的很清楚了，请自行查看。

根据条件渲染: 只通过 render 去判断参数不同而渲染不一样的表格数据。 render 函数可以渲染任何你想要的组件

值得注意的是，this 对象的绑定不要出错了,如果需要更多增强的功能，各位可以自行添加...

Home.vue 组件

Table.vue 组件

结语

上述代码封装完整性可能不是这么高，但思路在呢，如果需要更多配置，各位可以在进行加强...

吐槽一下，本来是想 props 数据来重写 table 参数，类似 react:

  


// ComonTable

所以想到继承，自己又不熟悉。 而且发现 vue 展开绑定多个属性是不可以的： 可能是我没 google 到。如果可以，请大佬告知一声，谢谢