vxe-table

简体中文 | 繁體中文 | English


一個基於 vue 的PC端表格組件，支持增刪改查、虛擬樹、列拖拽、懶加載、快捷菜單、數據校驗、導入/匯出/列印、表單渲染、自定義模板、渲染器、JSON 配置式…

瀏覽器支持

!Edge | !Chrome | !Firefox | !Opera | !Safari
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

功能點

* [x] 基礎表格
* [x] 配置式表單
* [x] 斑馬線條紋
* [x] 多種邊框
* [x] 儲存格樣式
* [x] 列寬拖動
* [x] 最小/最大高度
* [x] 自我調整寬高
* [x] 固定列
* [x] 多級表頭
* [x] 錶尾數據
* [x] 高亮行或列
* [x] 序號
* [x] 單選框
* [x] 核取方塊
* [x] 排序
* [x] 多欄位組合排序
* [x] 篩選
* [x] 儲存格合併
* [x] 合併錶尾
* [x] 導入/匯出/列印
* [x] 顯示/隱藏列
* [x] 拖拽/自定義列排序
* [x] 加載中
* [x] 格式化內容
* [x] 自定義插槽 - 範本
* [x] 快捷選單
* [x] 展開行
* [x] 工具列
* [x] 增删改查
* [x] 數據校驗
* [x] 數據代理
* [x] 鍵盤導航
* [x] 渲染器
* [x] 虛擬滾動
* [x] 虛擬合併
* [x] CSS 變量主題
* [x] ((企業版)) 儲存格區域選取
* [x] ((企業版)) 儲存格複製/粘貼
* [x] (企業版) 儲存格查找和替換
* [x] (企業版) 全鍵盤操作

安裝

版本：vue 3.x

``shell
npm install vxe-table@next
`

Get on unpkg and cdnjs

$3

$3

`javascript
// ...
import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeTable).mount('#app')
`

$3

`javascript
// ...
import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...

createApp(App).use(VxeUI).use(VxeTable).mount('#app')
`

$3

使用第三方 CDN 方式記得鎖定版本號，避免受到非兼容性更新的影響
不建議將第三方的 CDN 地址用於正式環境，因爲該連接隨時都可能會失效

`HTML









`

示例

`html



`

線上檔案

👉 組件文檔
👉 表格文檔

運行項目

安裝依賴

`shell
npm run update
`

啓動本地調試

`shell
npm run serve
`

編譯打包，生成編譯後的目錄：es,lib

`shell
npm run lib
``

Contributors

Thank you to everyone who contributed to this project.


License

MIT © 2019-present, Xu Liangzhan