大家好 ，我是一步莲华，致力于帮助高校实现教学、教务工作全过程的信息化

前言

大部分业务系统接触到最重要的UI组件怕就是表格了吧，这些年花了不少功夫在打造一个对用户和开发者来说都贴心的表格，用过很多表格组件，从最开始ASP.NET的gridview，到从git上扒下来国外的Jquery表格插件，甚至还自己用jquery做了一个table组件，来来回回的折腾了好多回，总是感觉不甚满意

Lotus框架整体使用el-emlent后，一直使用的都是自带el-table组件，但后来发现这个组件一方面功能相对较弱，另一方面是数据一旦较大，就比较卡，相当影响用户体验，最后被我找到了vxe-table 这个国人开发的组件，相当不错的一个table组件，具体大家可以到它的官网看下

Table组件介绍

为了更加贴合系统以及方便我在日常开发中的使用，我在原有的vxe-table组件上进行了一定的改造，添加了部分实用的属性，除了常用的导出，字段筛选，前后端分页，最大的改进就是加入了动态查询，自定义筛选，组件中心这几个功能，先给大家看下最终效果，一个完整的Table组件包含了四个区域,如下图（实际效果）

table组件

筛选区

用于筛选数据，筛选方式包含两种，动态筛选以及自定义筛选，

动态筛选：是固定在筛选界面上的下拉选项，下拉选项数据来源为原始数据，下拉项支持多选

动态筛选

自定义筛选：可以按照字段由用户自行添加筛选条件

自定义筛选

工具区

工具区左侧显示表格标题，当前数据行数以及选中行数，右侧包含五大功能点，下载Excel,打印,最大化,表格显示配置,组件中心

Excel下载

之前版本都采用前端导出，这种方式有个问题，就是导出的格式并不是真正得OFFICE格式，无法导入，新版本更改为后端下载，导出格式为标准得office格式

数据打印

简单得打印功能，数据量较大时要慎用，不然得卡死

打印界面

最大化

目前高度方面还有点问题，需要继续优化

显示配置

可以拖动列进行排序,合并单元格（考虑到效率得影响，合并只支持前两列）,可以为字段开启排序功能,字段是否隐藏,以及在列数较多时将列固定在表格左侧或者右侧，这些功能对用户来说算是比较常用也比较实用的功能了

表格字段配置

表格挂件

有的时候客户希望在一些表格页面上添加一些简单的统计功能，我们拿班级管理功能举例，基础的表格就是一个班级列表，假如希望有一个在校的系部班级分布统计该怎么办？再做个页面？既然数据都已经抓出来了，为什么不充分利用这些数据呢，于是就有了表格的挂件功能

用户可以通过简单的配置，在原始数据的基础上构建简单的统计视图，视图的表现形式主要为五种，表格,看板,饼图,柱状图,线图，挂件的类型分两种，一种是由管理员创建的公共挂件，这些挂件所有的用户都能看到，另外一种是客户自己创建的，这种挂件只有当前用户才能看到，主界面如下

组件中心

挂件区

显示当前表格对应的挂件，显示方式分为2种，一类是直接显示在表格上方，打开页面即可看见，另一类则显示在工具区域中，单击后即可查看

挂件区的视图数据来源为前端数据，因此只会统计当前页的数据，无法应对大量数据需要分页查看的情况

数据区

这个没啥好说的，显示后端获取的数据，根据配置情况显示分页控件

下篇预告

下一篇将为大家介绍部分利用Table组件来解决实际工作的案例