表格是一個非常重要的模塊，在早期被用來做頁面布局，后隨著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>