背景
在目前大多数情况下，越来越多拥有开发团队的公司使用Vue作为他们的前端开发框架，我们不得不承认Vue这种模式在很多地方是优于传统项目的，但是相信很多人会和笔者一样，在使用过程中，事物总不是想象中那么美好，其中有一项就和今天的主角有关，在组件方面，以往jQuery的方式存在大量的第三方组件，能应对很多复杂的业务场景，就比如表格组件。虽然普通的表格能满足普通的开发需求，但是遇到复杂的就会显得捉襟见肘，今天就来说一说在Vue中相当好用的一个表格组件——vxe-table！
开源仓库（MIT）
一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、非常灵活的配置项、扩展接口等...
https://github.com/xuliangzhan/vxe-table（1.9k）
https://gitee.com/xuliangzhan_admin/vxe-table（800+k）
功能
目前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-tableimport Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)<template>
<div>
<vxe-table :data="tableData">
<vxe-table-column type="seq" title="排序" width="60"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="sex" title="性别"></vxe-table-column>
<vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
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' }
]
}
}
}
</script>兼容性
在3.0版本及以后不再支持IE，2.0以及之前版本支持所有主流浏览器
总结
vxe-table确实是一个非常不错的表格组件，而且一直在不断的更新优化维护，感兴趣的小伙伴们可以直达仓库或者文档，伴有详细的使用指南和文档说明，开源不易，小伙伴们可以多多支持开发者，enjoy it！