vxe-table-demonic v4.5.21
vxe-table
一個基於 vue 的PC端表格組件,支持增删改查、虛擬清單、虛擬樹、懶加載、快捷選單、數據校驗、列印匯出、表單渲染、數據分頁、彈窗、自定義範本、渲染器、JSON 配置式…
設計理念
- 面向現代瀏覽器,高效的簡潔 API 設計
- 模組化表格、按需加載
- 為單行編輯表格而設計,支持增删改查及更多擴展,强大的功能的同時兼具效能
計劃
v1.0 基於 vue2.6,支持所有主流的瀏覽器,實現表格的一切實用的功能v2.0 基於 vue2.6,支持所有主流的瀏覽器,同時兼具功能與效能- v3.0 基於 vue2.6,支持現代瀏覽器並保留相容IE11
- v4.0 基于 vue3.x,只支持現代瀏覽器,不支持IE
瀏覽器支持
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
功能點
- 基礎表格
- 配置式表格
- 基礎表單
- 配置式表單
- 斑馬線條紋
- 多種邊框
- 儲存格樣式
- 列寬拖動
- 最小/最大高度
- 自我調整寬高
- 固定列
- 多級表頭
- 錶尾數據
- 高亮行或列
- 序號
- 單選框
- 核取方塊
- 下拉選項
- 開關
- 排序
- 多欄位組合排序
- 篩選
- 儲存格合併
- 合併錶尾
- 導入/匯出/列印
- 顯示/隱藏列
- 加載中
- 格式化內容
- 自定義插槽 - 範本
- 快捷選單
- 展開行
- 分頁
- 工具列
- 下拉容器
- 虛擬清單
- 增删改查
- 數據校驗
- 數據代理
- 鍵盤導航
- 彈窗
- 渲染器
- 虛擬滾動
- 虛擬合併
- CSS 變量主題
- (Plugin) 儲存格區域選取
- (Plugin) 儲存格複製/粘貼
- (Plugin) 儲存格查找和替換
安裝
版本:vue 3.x
npm install vxe-table@next
npm
import { createApp } from 'vue'
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" setup>
import { ref } from 'vue'
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' }
])
</script>
線上檔案
👉 官網檔案
參與檔案完善、補充詳細檔案
💡 官網檔案源碼
運行項目
安裝依賴
npm install
啓動本地調試
npm run serve
編譯打包,生成編譯後的目錄:es,lib
npm run lib
License
MIT © 2019-present, Xu Liangzhan
2 months ago
2 months ago
3 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
6 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago