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, print export, form rendering, custom template, renderer, JSON configuration...
-
Design concept
- Efficient and concise API design for modern browsers.
- Modular tables, on-demand loading.
- Designed for single row table editing, supports addition, deletion, modification and query as well as more expansion, with powerful functions and performance at the same time.
-
Plan
v1.0 Based on vue2.6, Support for all major browsers.v2.0 Based on vue2.6, Support for all major browsers.- v3.0 Based on vue2.6, supports modern browsers and retains compatibility with IE11.
- v4.0 Based on vue3.x, Only support modern browser, not IE.
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Features
- Basic table
- Configuration grid
- Striped
- Table with border
- Cell style
- Column resizing
- Minimum/maximum height
- Resize height & width
- Fixed column
- Grouping table header
- Table footer
- Highlight row & column
- Table sequence
- Radio
- Checkbox
- Sorting
- Multi field sorting
- Filter
- Merged cells
- Merged footer items
- Import/Export/Print
- Show/Hide column
- Drag and drop/Customize column sorting
- Loading
- Formatted cell
- Slot - template
- Context menu
- Detail - Expandable row
- Toolbar
- Virtual tree
- Editable CRUD
- Validate
- Data Proxy
- Keyboard navigation
- VxeGlobalRenderer
- Virtual scroll
- Virtual merger
- CSS Variable Theme
- (Enterprise) Cell area selection
- (Enterprise) Cell copy & paste
- (Enterprise) Cell find and replace
- (Enterprise) Full keyboard operation
Installing
Version: vue 3.x
npm install vxe-table
npm
import { createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
createApp(App).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://unpkg.com/vxe-table/lib/style.css">
<!-- Script -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></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
👉 Document
Run the project
Install dependencies
npm install
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