基於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)
<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確實是一個非常不錯的表格組件，而且一直在不斷的更新優化維護，具體可以參考倉庫或者文檔，有詳細的使用指南和文檔說明。