lhl 6ff0e96ad3 8-4-1		1 jaar geleden
..
helper	6ff0e96ad3 8-4-1	1 jaar geleden
lib	6ff0e96ad3 8-4-1	1 jaar geleden
packages	6ff0e96ad3 8-4-1	1 jaar geleden
styles	6ff0e96ad3 8-4-1	1 jaar geleden
types	6ff0e96ad3 8-4-1	1 jaar geleden
LICENSE	6ff0e96ad3 8-4-1	1 jaar geleden
README.en.md	6ff0e96ad3 8-4-1	1 jaar geleden
README.md	6ff0e96ad3 8-4-1	1 jaar geleden
README.zh-TW.md	6ff0e96ad3 8-4-1	1 jaar geleden
package.json	6ff0e96ad3 8-4-1	1 jaar geleden

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 ✔	8+ ✔

Features

Basic table
Grid
Striped
Table with border
Cell style
Column resizing
Maximum table 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
Form
Toolbar
Pulldown
List
Editable CRUD
Tree table
Validate
Data Proxy
Keyboard navigation
Modal
Renderer
Virtual scroller
Virtual merger
x Cell area selection
x Cell copy & paste
x Cell find and replace

Installing

Version：vue 2.6.x, Dependent: 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

Support the author

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

👉 Supports the author💰

README.en.md