vxe-table

简体中文 | 繁體中文 | English

A vue based PC form component, support add, delete, change, virtual list, virtual tree, lazy load, shortcut menu, data validation, print export, form rendering, data paging, modal window, 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
• Base form
• Configuration form
• 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
• Select
• Switch
• Sorting
• Multi field sorting
• Filter
• Merged cells
• Merged footer items
• Import/Export/Print
• Show/Hide column
• Loading
• Formatted cell
• Slot - template
• Context menu
• Detail - Expandable row
• Pager
• Toolbar
• Pulldown
• Virtual list
• Virtual tree
• Editable CRUD
• Validate
• Data Proxy
• Keyboard navigation
• Modal
• VxeGlobalRenderer
• Virtual scroller
• Virtual merger
• CSS Variable Theme
• (插件) Cell area selection
• (插件) Cell copy & paste
• (插件) Cell find and replace

Installing

Version: vue 3.x

1npm install vxe-table@next

Get on unpkg and cdnjs

npm

1import { createApp } from 'vue'
2import VXETable from 'vxe-table'
3import 'vxe-table/lib/style.css'
4
5createApp(App).use(VXETable).mount('#app')

CDN

Remember to lock the version number in CDN mode to avoid being affected by incompatible updates
It is not recommended to use the CDN address of a third party for production, as the connection may fail at any time

1<!-- Style -->
2<link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css">
3<!-- Script -->
4<script src="https://unpkg.com/xe-utils"></script>
5<script src="https://unpkg.com/vxe-table@next"></script>

Example

1<template>
2  <div>
3    <vxe-table :data="tableData">
4      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
5      <vxe-column field="name" title="Name"></vxe-column>
6      <vxe-column field="role" title="Role"></vxe-column>
7      <vxe-colgroup title="Group1">
8        <vxe-column field="sex" title="Sex"></vxe-column>
9        <vxe-column field="address" title="Address"></vxe-column>
10      </vxe-colgroup>
11    </vxe-table>
12  </div>
13</template>
14
15<script lang="ts" setup>
16import { ref } from 'vue'
17
18const tableData = ref([
19  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
20  { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
21  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
22])
23</script>

Online Documents

👉 Document

Participate in document improvement and supplement detailed documents.

💡 Document source code

Run the project

Install dependencies

1npm install

Start local debugging

1npm run serve

Compile packaging, generated compiled directory: es,lib

1npm run lib

License

MIT © 2019-present, Xu Liangzhan