【vxe-table】表格庫

vxe-table 介紹

一個基於vue的PC端表格組件庫，支持增刪改查、虛擬滾動、懶加載、表單校驗、樹形結構、打印導出、表單渲染、數據分頁等

• v3.0 基於 vue2.6+，支持現代瀏覽器並兼容IE11
• v4.0 基於 vue3.0+, 只支持現代瀏覽器，不支持IE

倉庫、示例、文檔入口

• vxe-table Gitee
• 查看示例
• 查看文檔

安裝及配置

# 全局安裝 依賴 xe-utils vue 2.6x
npm install xe-utils@3 vxe-table@3 

# 引入及安裝插件庫
import Vue from 'vue'
import XEUtils from 'xe-utils' 
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)
// 把XEUTils綁定到this中，方便在組件中通過 this 訪問使用 
Vue.prototype.$Utils = XEUtils

基礎表格 vxe-table

<template>
  <vxe-table
    stripe
    highlight-current-row
    highlight-hover-row
    :data="tableData"
  >
    <vxe-table-column type="seq" width="60"></vxe-table-column>
    <vxe-table-column field="name" title="Name"></vxe-table-column>
    <vxe-table-column field="sex" title="Sex"></vxe-table-column>
    <vxe-table-column field="age" title="Age"></vxe-table-column>
  </vxe-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 從入門到放棄' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }
      ]
    }
  }
}
</script>

高級表格 vxe-grid

<template>
  <vxe-grid v-bind="gridOptions"></vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: { 
        resizable: true,
        showOverflow: true,   
        columns: [
          { type: "seq", width: 50 },
          { field: "name", title: "名稱" },
          {
            field: "sex",
            title: "性別",
            showHeaderOverflow: true,
          }, 
        ],
        data: [
          {
            id: 10001,
            name: "Test1", 
            sex: "Man"
          },
          {
            id: 10002,
            name: "Test2", 
            sex: "Women"
          }
        ],
      },
    };
  },
};
</script>

vxe-table 和 vxe-grid 有什么區別

grid 包含 table全部功能，集成分頁、表頭json配置，更方便更簡潔、整合代理自動觸發接口。

說明	vxe-table(普通表格)	vxe-grid(高級表格)
用法	單元格	使用JSON配置{ fild: 'xx' }
動態列	√ 靜態	√ 全動態JSON
自定義模板	√ 部分 (插槽)	√ 完整 (插槽、JSX、渲染函數)
表單		√ 集成
工具欄		√ 集成
分頁		√ 集成
CRUD	√ 部分(新增、刪除、修改)	√ 完整 (查詢、新增、刪除、修改、標記)
數據代理		√
全屏放大		√
數據校驗	√	√
基礎參數及事件	√	√
邊框	√	√
序號	√	√
復選框、單選框	√	√
高亮行和列	√	√
格式化內容	√	√
篩選	√	√
多列排序	√	√
列寬拖動	√	√
分組表頭	√	√
左右固定列	√	√
展開行	√	√
樹形結構	√	√
按鍵導航	√	√
顯示/隱藏列	√	√
右鍵快捷菜單	√	√
合並	√	√
導入	√	√
導出(xlsx,csv,html,xml,txt,pdf)	√	√
打印	√	√