一飛開源,介紹創意、新奇、有趣、實用的免費開源應用、系統、軟體、硬體及技術,一個探索、發現、分享、使用與互動交流的開源技術社區平台。致力於打造活力開源社區,共建開源新生態!
一、開源項目簡介
一個基於 vue 的 PC 端表格組件,支持增刪改查、虛擬列表、虛擬樹、懶加載、快捷菜單、數據校驗、列印導出、表單渲染、數據分頁、彈窗、自定義模板、渲染器、賊靈活的配置項等...
- 設計理念
- 面向現代瀏覽器,高效的簡潔 API 設計
- 模塊化表格、按需加載
- 為單行編輯表格而設計,支持增刪改查及更多擴展,強大的功能的同時兼具性能
二、開源協議
使用MIT開源協議
三、界面展示
四、功能概述
瀏覽器支持
80+ ✔ |
80+ ✔ |
90+ ✔ |
75+ ✔ |
10+ ✔ |
功能點
- 基礎表格
- 高級表格
- 斑馬線條紋
- 多種邊框
- 單元格樣式
- 列寬拖動
- 最大高度
- 自適應寬高
- 固定列
- 多級表頭
- 表尾數據
- 高亮行或列
- 序號
- 單選框
- 複選框
- 下拉選項
- 開關
- 排序
- 多欄位組合排序
- 篩選
- 合併單元格
- 合併表尾
- 導入/導出/列印
- 顯示/隱藏列
- 加載中
- 格式化內容
- 自定義插槽 - 模板
- 快捷菜單
- 展開行
- 分頁
- 表單
- 工具欄
- 下拉容器
- 虛擬列表
- 虛擬樹
- 增刪改查
- 數據校驗
- 數據代理
- 鍵盤導航
- 彈窗
- 渲染器
- 虛擬滾動
- 虛擬合併
- (pro) 單元格區域選取
- (pro) 單元格複製/粘貼
- (pro) 單元格查找和替換
五、技術選型
推薦使用 npm 的方式安裝,它能更好地和 webpack、vite 等打包工具配合使用。
依賴庫: xe-utils vue 3.2+
安裝
版本:vue 3.x, 依賴庫:xe-utils
npm install xe-utils vxe-table@next
Get on unpkg and CDNjs
npm
import { createApp } from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount('#app')
CDN
不建議將第三方的 CDN 地址用於生產,因為該連接隨時都可能會失效,導致項目掛掉;
使用 CDN 方式記得鎖定版本號,避免受到非兼容性更新的影響
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css">
<!-- 引入腳本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table@next"></script>
示例
<template>
<div>
<vxe-table :data="tableData">
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-colgroup title="Group1">
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup () {
const tableData = ref([
{ 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' }
])
return {
tableData
}
}
})
</script>
文檔
以下內容詳見 README.md 文檔:
使用指南
查看文檔
運行項目
安裝依賴
npm run update
啟動本地調試
npm run serve
編譯打包,生成編譯後的目錄:es,lib
npm run lib
六、源碼地址
訪問一飛開源:https://code.exmay.com/