表格是一个非常重要的模块，在早期被用来做页面布局，后随着div流体布局的出现逐渐被替代，但在数据展示上还发挥着重要作用，本次教程主要讲解able表格基本属性及跨行跨列合并。

景

在目前大多数情况下，越来越多拥有开发团队的公司使用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-table

import 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！

<div style="">
 <div id="div1">
 <table >
 
 </table>
 </div>
 <div id="div2">
 <table style="width:12900px;">
 
 </table>
 </div>
 <div id="div3">
 <table>
 
 </table>
 </div>
 <div id="div4">
 <table id="table1" style="width:12900px;">
 
 </table>
 </div>
</div>
<script>
 $('#table1').parent("div").each(function () {
 $(this).data({sl: this.scrollLeft, st: this.scrollTop});
 }).scroll(function () {
 var sl = this.scrollLeft, st = this.scrollTop;
 $("#div2").scrollLeft(sl);
 $("#div3").scrollTop(st);
 });
</script>