element ui表格打印_封装element-ui表格，我是这样做的

日日加班至夜半，环视周围无人走；明晚八点准时走，谁不打卡谁是狗。

使用过element-ui的表格的同学应该都有这样的体会，做一个简单的表格还比较容易，但如果这个表格包含了顶部的按钮，还有分页，甚至再包含了行编辑，那开发工作量就成倍的增加，特别是在开发管理系统的时候，表格一个接一个的去开发， 即浪费时间，还对个人没有什么提升。今天小编带来了自己封装的一个表格，让你用JSON就可以简单的生成表格。

本文主要集中于封装思想与核心代码说明，完整代码请访问 github.com/snowzijun/v…,如果觉得有用，麻烦给小编一个star,你的每一个star都是对小编的支持，当前功能比较简陋，本仓库将持续更新。同时您也可以微信搜索【前端有的玩】公众号，与小编进行沟通。

表格需求

一般管理系统对表格会有以下需求

可以分页(需要有分页条)可以多选(表格带复选框)顶部需要加一些操作按钮(新增，删除等等)表格每行行尾有操作按钮表格行可以编辑如下图为一个示例表格

如果我们直接使用element-ui提供的组件的话，那么开发一个这样的表格就需要使用到以下内容

需要使用表格的插槽功能，开发每一行的按钮需要通过样式调整顶部按钮，表格，分页条的布局样式需要监听分页的事件然后去刷新表格数据顶部按钮或操作按钮如果需要获取表格数据，需要调用表格提供的api对于有行编辑的需求，还需要通过插槽去渲染行编辑的内容，同时要控制行编辑的开关不仅仅开发表格比较麻烦，而且还要考虑团队协作，如果每个人实现表格的方式存在差别，那么可能后期的维护成本也会变得很高。那怎么办呢？

项目安装

安装插件

在使用element-ui的项目中，可以通过以下命令进行安装

npm install vue-elementui-table -S复制代码

在项目中使用

在main.js中添加以下代码

import ZjTable from 'vue-elementui-table'Vue.use(ZjTable)复制代码

然后即可像下文中的使用方式进行使用

表格配置

为了满足团队快速开发的需要，小编对上面提出来的需求进行了封装，然后使用的时候，开发人员只需要配置一些JSON便可以完成以上功能的开发。

基础配置

一个基础的表格包含了数据和列信息，那么如何用封装的表格去配置呢？

复制代码

通过上面的配置，就可以完成一个基础表格的开发，完整代码见 github.com/snowzijun/v…，效果如下图所示

表格默认会显示复选框，也可以通过配置selectable属性来关闭掉

添加分页

简单的表格用封装之后的或未封装的开发工作量区别并不大，我们继续为表格添加上分页

复制代码

完整代码请参考 github.com/snowzijun/v…

通过封装，表格将自带分页功能,通过上面代码，实现效果如下所示,是不是变得简单了一些。接下来我们继续给表格添加按钮

添加顶部按钮

表格上面可能会有新增，删除等等按钮，怎么办呢，接下来我们继续通过配置去添加按钮

复制代码

表格顶部可以添加普通的按钮，也可以添加下拉按钮，同时还可以通过before来配置按钮是否显示，disabled来配置按钮是否禁用，上面完整代码见 github.com/snowzijun/v…

通过上面的代码就可以配置出下面的表格,是不是很简单呢？

表格顶部可以有按钮，行尾也是可以添加按钮的，一起来看看

行操作按钮

一般我们会将一些单行操作的按钮放在行尾，比如编辑，下载等按钮，那如何给行尾配置按钮呢?

复制代码

行操作按钮会被冻结到表格最右侧，不会跟随滚动条滚动而滚动，上面完整代码见, github.com/snowzijun/v…

通过上面的代码就可以完成以下效果

最后再来一起看看行编辑

行编辑

比如上例，我希望点击行尾的编辑按钮的时候，可以直接在行上面编辑用户的姓名与性别，如何配置呢?

复制代码

不需要使用插槽就可以完成行编辑，是不是很开心。上述完整代码见 github.com/snowzijun/v…

效果如下图所示:

其他功能

除了上面的功能之外，表格还可以配置其他许多功能，比如

可以指定字段为链接列，需要给列配置link属性可以通过插槽自定义顶部按钮，行操作按钮，行字段等可以在按钮区域右侧通过插槽配置其他内容其他等等表格开发说明

通过上面的代码示例，我们已经知道了封装之后的表格可以完成哪些事情，接下来一起来看看表格是如何实现的。完整代码见 github.com/snowzijun/v…

表格布局

整个表格是通过JSX来封装的，因为JSX使用起来更加灵活。对于我们封装的表格，我们从竖向可以分为三部分，分别是顶部按钮区，中间表格区，底部分页区，如何去实现三个区域的布局呢，核心代码如下

render(h) { // 按钮区域 const toolbar = this.$_renderToolbar(h) // 表格区域 const table = this.$_renderTable(h) // 分页区域 const page = this.$_renderPage(h) return (

{toolbar} {table} {page}

) }复制代码

通过三个render函数分别渲染对应区域，然后将三个区域组合在一起。

渲染表格列

通过前文的讲解,我们可以将表格的列分为以下几种

常规列行编辑列操作按钮列插槽列链接列(文档后续完善)嵌套列(文档后续完善)$_renderColumns(h, columns) { // 整体是否排序 let sortable = this.sortable ? 'custom' : false return columns .filter(column => { const { hidden } = column if (hidden !== undefined) { if (typeof hidden === 'function') { return hidden({ columns, column }) } return hidden } return true }) .map(column => { const { useSlot = false, // 如果存在操作按钮，则actions为非空数组 actions = [], // 是否可编辑列， 对于可编辑列需要动态启用编辑 editable = false, // 是否有嵌套列 nests, // 是否可点击 link = false } = column let newSortable = sortable if (column.sortable !== undefined) { newSortable = column.sortable ? 'custom' : false } column = { ...column, sortable: newSortable } if (nests && nests.length) { // 使用嵌套列 return this.$_renderNestColumn(h, column) } else if (editable) { // 使用编辑列 return this.$_renderEditColumn(h, column) } else if (useSlot) { // 使用插槽列 return this.$_renderSlotColumn(h, column) } else if (actions && actions.length > 0) { // 使用操作列 column.sortable = false return this.$_renderActionColumn(h, column) } else if (link) { // 使用链接列 return this.$_renderLinkColumn(h, column) } else { // 使用默认列 return this.$_renderDefaultColumn(h, column) } }) },复制代码

行编辑列

当前表格行编辑支持input,select,datepicker,TimeSelect,InputNumber等组件，具体渲染代码如下所示

// 编辑单元格 $_renderEditCell(h, field) { const components = { input: Input, select: ZjSelect, date: DatePicker, time: TimeSelect, number: InputNumber } const componentType = field.componentType const component = components[componentType] if (component) { return this.$_renderField(h, field, component) } else if (componentType === 'custom') { // 如果自定义，可以通过component指定组件 return this.$_renderField(h, field, field.component) } return this.$_renderField(h, field, Input) }, $_renderField(h, field, Component) { // 编辑行的id字段 const { rowId, events = {}, nativeEvents = {} } = field const getEvents = events => { const newEvents = {} Object.keys(events).forEach(key => { const event = events[key] newEvents[key] = (...rest) => { const args = [ ...rest, { rowId, row: this.editRowsData[rowId], value: this.editRowsData[rowId][field.prop] } ] return event(...args) } }) return newEvents } // 事件改写 const newEvents = getEvents(events) const newNativeEvents = getEvents(nativeEvents) return ( ) }