基于Vue开源的高效复杂表格解决方案——「vxe-table」

背景
在目前大多数情况下，越来越多拥有开发团队的公司使用Vue作为他们的前端开发框架，我们不得不承认Vue这种模式在很多地方是优于传统项目的，但是相信很多人会和笔者一样，在使用过程中，事物总不是想象中那么美好，其中有一项就和今天的主角有关，在组件方面，以往jQuery的方式存在大量的第三方组件，能应对很多复杂的业务场景，就比如表格组件。虽然普通的表格能满足普通的开发需求，但是遇到复杂的就会显得捉襟见肘，遇到一个开源的在Vue中相当好用的一个表格组件——vxe-table！

---

开源仓库（MIT）
一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、非常灵活的配置项、扩展接口等…

https://github.com/xuliangzhan/vxe-table
https://gitee.com/xuliangzhan_admin/vxe-table

功能
目前vxe-table已经来到3.x版本，以下是文档中所说明的功能，可以说是非常丰富了，基本上满足大多数复杂业务场景（比如说大型ERP系统，对于表格要求非常高的场景）
基础表格、高级表格、斑马线条纹、多种边框、单元格样式、列宽拖动、最大高度、自适应宽高、固定列、多级表头、表尾数据、高亮行、列、序号、单选框、复选框、下拉选项、开关、排序、筛选、合并行或列、导入、导出、打印、显示/隐藏列、加载中、格式化内容、自定义插槽/模板、快捷菜单、展开行、分页、表单、工具栏、下拉容器、虚拟列表、增删改查、树表格、数据校验、数据代理、键盘导航、模态窗口、渲染器、虚拟滚动

组件模块
以下是其核心组件模块，且可以和国内主流组件框架适配
• 核心 (表格)
• 可选模块 （图标）、（表头）、（表尾）、（筛选）、（提示信息）、（快捷菜单）、（导出）、（按键导航）
• 可选组件 （高级表格）、（静态列）、（虚拟列表）、（表单）、（分页）、（工具栏）（复选框）、（单选框）、（输入框）、（下拉框）、（开关）、（模态窗口）、（按钮）（下拉容器）
• 可选插件增强插件 (PDF 导出插件) 、(XLSX 导出插件) 、(快捷菜单插件)
• 适配插件 (element-ui 适配插件)、 (iview 适配插件)、 (ant-design-vue 适配插件)

安装配置
vex-table依赖库：vue 2.6+, xe-utils 2.4+，根据习惯使用npm或者yarn

npm install xe-utils vxe-table

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)
>
  >
    -table :data="tableData">
      -table-column type="seq" title="排序" width="60">-table-column>
      -table-column field="name" title="姓名">-table-column>
      -table-column field="sex" title="性别">-table-column>
      -table-column field="address" title="地址">-table-column>
    -table>
  >
>

>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
>

兼容性
在3.0版本及以后不再支持IE，2.0以及之前版本支持所有主流浏览器

总结
vxe-table确实是一个非常不错的表格组件，而且一直在不断的更新优化维护，具体可以参考仓库或者文档，有详细的使用指南和文档说明。