@blueking/vxe-table
v4.8.0-beta.7.1
Published
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟树、列拖拽,懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...
Downloads
62
Readme
vxe-table
A vue based PC form component, support add delete change check, virtual tree, column drag and drop, lazy loading, shortcut menu, data verification, import/export/print, form rendering, custom template, renderer, JSON configuration...
Browser Support
| | | | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Features
- [x] Basic table
- [x] Configuration grid
- [x] Striped
- [x] Table with border
- [x] Cell style
- [x] Column resizing
- [x] Minimum/maximum height
- [x] Resize height & width
- [x] Fixed column
- [x] Grouping table header
- [x] Table footer
- [x] Highlight row & column
- [x] Table sequence
- [x] Radio
- [x] Checkbox
- [x] Sorting
- [x] Multi field sorting
- [x] Filter
- [x] Merged cells
- [x] Merged footer items
- [x] Import/Export/Print
- [x] Show/Hide column
- [x] Drag and drop/Customize column sorting
- [x] Loading
- [x] Formatted cell
- [x] Slot - template
- [x] Context menu
- [x] Detail - Expandable row
- [x] Toolbar
- [x] Virtual tree
- [x] Editable CRUD
- [x] Validate
- [x] Data Proxy
- [x] Keyboard navigation
- [x] VxeGlobalRenderer
- [x] Virtual scroll
- [x] Virtual merger
- [x] CSS Variable Theme
- [x] (Enterprise) Cell area selection
- [x] (Enterprise) Cell copy & paste
- [x] (Enterprise) Cell find and replace
- [x] (Enterprise) Full keyboard operation
Installing
Version: vue 3.x
npm install vxe-table@next
NPM
Use Table
// ...
import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...
createApp(App).use(VxeTable).mount('#app')
Use Table and 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
Use a third-party CDN to remember to lock the version number to avoid being affected by incompatible updates.
It is not recommended to use the CDN address of a third party in a formal environment because the connection can fail at any time
<!-- 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>
Example
<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>
Online Documents
Run the project
Install dependencies
npm run update
Start local debugging
npm run serve
Compile packaging, generated compiled directory: es,lib
npm run lib
Contributors
Thank you to everyone who contributed to this project.
License
MIT © 2019-present, Xu Liangzhan