vxe-table-yunti

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

Usage no npm install needed!

<script type="module">
  import vxeTableYunti from 'https://cdn.skypack.dev/vxe-table-yunti';
</script>

README

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
Donation
- v1.0 100% Based on vue2.6+, it supports all mainstream browsers and realizes all practical functions of tables
- v2.0 100% Based on vue2.6+, it supports all mainstream browsers with both functions and performance
- v3.0 60% Based on vue2.6+, only H5 browser is supported, ie is not supported, rendering performance is greatly improved
- v4.0 0% Based on vue3+, only H5 browser is supported, ie is not supported, rendering performance is greatly improved

👉 If you have a better suggestion, optimization point or Bug, please feel free to ask Issues

Browser Support


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

Features

Basic table
Grid
Striped
Table with border
Cell style
Column resizable
Maximum table height
Resize height and width
Fixed column
Grouping table header
Table footer
Highlight row and column
Table sequence
Radio
Checkbox
Select
Switch
Sorting
Filter
Rowspan and colspan
Import
Export
Print
Show/Hide column
Loading
Formatted cell
Slot/template
Context menu
Expandable row
Pager
Form
Toolbar
Pulldown
List
Editable CRUD
Tree table
Validate
Data Proxy
Keyboard navigation
Modal
Renderer
Virtual Scroller

Modules

Core
Modules
Component
Plugins
- Strengthen
- Adapter

Installing

Dependent: vue 2.6+, xe-utils 2.4+

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/index.css'

Vue.use(VXETable)

CDN

<!-- Style -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.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="80"></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

Donation

If the open source project is very helpful to you, you can buy the author a cup of coffee.
Feel free to leave a comment or ask Issues

👉 Donation method💰

License

MIT License, 2019-present, Xu Liangzhan