基于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>