datagrid vue_类似 easyui 中 datagrid 使用习惯的 element-ui 数据表格组件（el-datagrid）...

背景

element-ui 中的 el-table 组件只提供了数据展示，而分页功能作为一个单独的组件 el-pagination，并没有像 Ant Design 一样集成到 el-able 组件中，并且每一个数据列也都是一个单独的组件 el-table-column。

在开发过程中就出现了一个很明显的问题：业务中的大部分数据表格功能都类似，数据列通常在3-6个不等，且都需要分页，前端分页与后端分页的逻辑又不相同，这就导致了每次写一个这样数据表格功能，都需要至少复制粘贴很多 el-table-column 组件和一套实现分页功能的代码。写代码最恼火的就是要复制粘贴很多重复的代码，一不小心就漏了些什么，有木有……

结合我最早使用的 easyui 中的 datagrid 组件，在 element-ui的基础上封装一个能满足大部分业务功能的 el-datagrid 组件，能大大的提高开发效率。

EasyUI 的 datagrid

接触的第一个 UI 框架是 jQuery 版本的 EasyUI，虽然样式是丑了一点，但个人觉得它的组件的封装，对开发人员是很友好的，基本上每个组件都可以用一个 对象或数组 去动态配置，很符合 数据驱动 的思维。

功能

大部分的业务(增删改查)中，数据表格通常有以下几个功能：

数据展示

排序

对每一行的操作(查看、修改、删除)

对整个数据表格的操作(新增、批量删除)

分页(前端 / 后端)

刷新数据

数据列配置(功能1、2、3 )

通常会从远程加载数据，将数据列配置成 数组，数组的每一项匹配远程数据中对象的属性&