vxe-table

简体中文 | English

A vue based PC form component, support add, delete, change, virtual scroll, lazy load, shortcut menu, data validation, tree structure, print export, form rendering, data paging, virtual list, modal window, custom template, renderer, flexible configuration items, extension interface, etc...

• Design concept
  • Efficient and concise API design for modern browsers
  • Modular tables, on-demand loading, extended interfaces
  • 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

Browser Support

11+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Features

• [x] Basic table
• [x] Grid
• [x] Striped
• [x] Table with border
• [x] Cell style
• [x] Column resizing
• [x] Maximum table 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] Select
• [x] Switch
• [x] Sorting
• [x] Filter
• [x] Merged cells
• [x] Merged footer items
• [x] Import
• [x] Export
• [x] Print
• [x] Show/Hide column
• [x] Loading
• [x] Formatted cell
• [x] Slot - template
• [x] Context menu
• [x] Detail - Expandable row
• [x] Pager
• [x] Form
• [x] Toolbar
• [x] Pulldown
• [x] List
• [x] Editable CRUD
• [x] Tree table
• [x] Validate
• [x] Data Proxy
• [x] Keyboard navigation
• [x] Modal
• [x] Renderer
• [x] Virtual Scroller
• [x] (pro) Cell area selection
• [x] (pro) Cell copy & paste
• [x] (pro) Cell find and replace

Installing

Dependent: vue 2.6+, xe-utils

 npm install xe-utils vxe-table

Get on unpkg and cdnjs

npm

 import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

CDN

 <!-- 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>
<!-- It is recommended that users introduced by CDN lock the version on the link address to avoid the impact of incompatible updates -->

Example

 <template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="Seq" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { 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>

Docs

💡 User guide
👉 View example
👉 View API

Donate

If the open source software is helpful to you, you can scan the QR code below to support us.☕

👉 Supports the author💰

License

MIT © 2019-present, Xu Liangzhan