锐客网

  1. 首页 > it技术 > >

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

前言 【基于|基于 antd 风格的 element-table + pagination 的二次封装】本次封装基于 antd 风格, 实现高度可配置的表格封装配置。本来想通过 vue.extends 去封装的，奈何几个月没写过 vue ，而且对 vue 的 extends 不熟悉所以放弃了...
之前有小伙伴确实引用了我的代码，发现封装出现了一些纰漏，对此十分抱歉，之前封装的太仓促了。几个月前的代码，现在重新封装又有了新的体会。
更新时间 【2018.11.09】，效果如下：
基于|基于 antd 风格的 element-table + pagination 的二次封装
文章图片
image API 说明

  • columns : 必选, 列描述数据对象， Array
  • dataSource : 必选, 数据数组
  • options : 必选, 表格参数控制, maxHeight、stripe 等等..
  • fetch : 获取数据的 Function
  • pagination : 分页信息，不传则不显示分页
  • row-click ：当某一行被点击时会触发该事件
  • selection-change : 当选择项发生变化时会触发该事件
  • 其他的 api 可以自行添加
其他说明我在代码注释中写的很清楚了，请自行查看。
根据条件渲染: 只通过 render 去判断参数不同而渲染不一样的表格数据。 render 函数可以渲染任何你想要的组件
值得注意的是，this 对象的绑定不要出错了,如果需要更多增强的功能，各位可以自行添加...
Home.vue 组件

Table.vue 组件
.el-table th, .el-table tr.table-header-row { background: #e5c5d2; /* 示例， 对表格样式上的修饰 */ }

结语 上述代码封装完整性可能不是这么高，但思路在呢，如果需要更多配置，各位可以在进行加强...
吐槽一下，本来是想 props 数据来重写 table 参数，类似 react:
// ComonTable

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

    推荐阅读


    上一篇：CET4听力微技能一

    下一篇：标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。