后台，类似easyui中的datagrid，只提供数据展示，而分页功能是一个单独的组件el-pagination，并没有集成到el-able组件和AntDesign一样，每个数据列也是一个单独的组件el-table-column。在开发过程中，有一个明显的问题：业务中大部分数据表的功能都差不多，数据列通常在3到6列之间，而且都需要分页，而前端分页的逻辑和后端分页是不同的。同样，这导致每次写这样的数据表格功能时，至少需要复制粘贴很多el-table-column组件和一套实现分页功能的代码。写代码最烦的就是复制粘贴一大堆重复的代码。我不小心错过了一些东西。有没有什么...结合我第一次使用的easyui中的datagrid组件，我在element-ui的基础上封装了一个可以满足大部分业务功能的el-datagrid组件，可以大大提高开发效率。EasyUI的datagrid最早接触到的UI框架是jQuery版的EasyUI。虽然样式有点难看，但个人认为其组件的封装对开发者来说还是很友好的。基本上每个组件都可以使用一个对象或者数组来动态配置，符合数据驱动的思想。功能在大多数业务中（增删改查），数据表通常有以下功能：数据展示对每一行的排序操作（查看、修改、删除）对整张数据表的操作（增删改查）分页（Frontend/Backend）刷新数据数据列配置（功能1、2、3）通常从远程加载数据，将数据列配置成一个数组，数组的每一项匹配远程数据中对象的属性，而不是写el-table-column组件出现问题。远程数据格式：{data:[{name:'lixiao1',email:'lixiao1@163.com'},...{name:'lixiao12',email:'lixiao12@163.com'}],total:12}数据列配置如下：columns:[{label:'name',prop:'name',sortable:true},{label:'mailbox',prop:'email',sortable:true},{label:'operation',actions:[{label:'modify',prop:'edit',type:'warning',icon:'el-icon-edit'},{label:'delete',prop:'delete',type:'danger',icon:'el-icon-delete'}]}]label表示该列对应的表头，prop表示该列对应的远程数据中对象的属性，sortable表示该列是否支持排序，actions通常在最后一列，渲染一组操作按钮，通过this.$emit('rowClick',{row,prop}),参数是包含row数据的row和Click按钮prop值的对象(如edit/delete),在父组件中监听rowClick事件，判断prop的价值可以做出不同的反应。工具栏配置（功能4）数据栏配置可以解决数据增删改查中的删除、修改、查询。通常在表格上方会提供一组功能按钮，比如新增、导出（部分/全额）、批量删除等功能，特殊之处在于批量删除功能需要获取该表的数据选定的行。toolbar:[{label:'Add',prop:'add',type:'primary',icon:'el-icon-plus',},{label:'删除多行',prop:'delete',类型:'danger',icon:'el-icon-delete',usableAfterSelect:true}]同样使用this.$emit('toolbarClick',{rows,prop})传递一个toolbarClick事件给父组件，不同的是，rows是一个包含多行数据的数组（当然也可以是空数组）。父组件监听toolbarClick事件，可以通过判断prop的值和行的长度做出不同的响应。需要至少选中一行的功能，可以参考AntDesign例子中的交互。将usableAfterSelect属性设置为true后，按钮将不可用，直到至少选择了一行。分页（函数5）前端分页第一次获取数据后，要切换页码，切换每页的页数，只需要用slice截取原data数组中对应的数据量即可。后端分页每次切换页码和每页的页数，都需要重新获取数据，所有返回的数据都会作为要显示的原始数据。//ElDatagrid.vue//this.index表示显示数据的序号，header为#
