@blueking/vxe-table
v4.8.0-beta.7.6
Published
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟树、列拖拽,懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...
Downloads
704
Readme
vxe-table
一個基於 vue 的PC端表格組件,支持增刪改查、虛擬樹、列拖拽、懶加載、快捷菜單、數據校驗、導入/匯出/列印、表單渲染、自定義模板、渲染器、JSON 配置式…
瀏覽器支持
| | | | --- | --- | --- | --- | --- | 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
npm install vxe-table@next
NPM
使用表格
// ...
import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...
createApp(App).use(VxeTable).mount('#app')
使用表格与 UI 库
// ...
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')
CDN
使用第三方 CDN 方式記得鎖定版本號,避免受到非兼容性更新的影響
不建議將第三方的 CDN 地址用於正式環境,因爲該連接隨時都可能會失效
<!-- style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- table -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
<script src="https://cdn.jsdelivr.net/npm/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 run update
啓動本地調試
npm run serve
編譯打包,生成編譯後的目錄:es,lib
npm run lib
Contributors
Thank you to everyone who contributed to this project.
License
MIT © 2019-present, Xu Liangzhan