vxe-table

A complete Vue Table, support most of the Table of all requirements, and perfect compatibility with any component library.
一个完整 Vue 表格，支持绝大部分对 Table 的一切需求，与任意组件库完美兼容

vxe-table 的设计理念
- 精简的 API（简洁、高效、通用）
- 模块化表格（功能模块拆分，全部都可以按需加载）
- 更加灵活的自定义配置项，更高的可扩展性（兼容任意组件库，不污染全局样式及变量）
- 强大的功能的同时兼具性能（支持虚拟滚动）

😉 如果有更好的建议、优化点或 Bug 都欢迎提 Issues

Browser Support


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

Features

Basics table （基础）
Size （尺寸）
Striped （斑马线条纹）
Table with border （带边框）
Cell style （单元格样式）
Column resizable （列宽拖动）
Fluid-height table with fixed header （流体高度）
Resize height and width （响应式宽高）
Table with fixed header （固定表头）
Table with fixed column （固定列）
Table with fixed columns and header （固定表头和列）
Grouping table head （表头分组）
Table sequence （序号)
Radio （单选)
Checkbox （多选）
Sorting （排序）
Filter （筛选）
Rowspan and colspan （合并行或列）
Footer summary （表尾合计）
Export CSV （导出 CSV）
Show/hide columns （显示/隐藏列）
Loading （加载中）
Format content （格式化内容）
Custom column template （自定义模板）
Context menu（快捷菜单）
Virtual Scroller（虚拟滚动）
Expandable row （展开行）
Pager（分页）
Toolbar（工具栏）
Tree table （树形表格)
Editable CRUD（增删改查)
Editable validate（数据校验）
DataProxy（数据代理）
Keyboard navigation（全键盘操作）
Excel（Excel 表格）

Modules

All functional modules support loading on demand.（所有的功能模块都支持按需加载）

(核心)
- Components （高级组件）
  - （扩展）
  - （Excel）
- Modules （功能模块）
  - （列与单元格）
  - （表头）
  - （表内容）
  - （表尾）
  - （筛选）
  - （加载中）
  - （快捷菜单）
  - （导出）
  - （响应式）
  - （分页）
  - （工具栏）
  - （复选框）
  - （单选框）
  - （输入框）
  - （消息提示框）
  - （按钮）
- Plugins（插件）
  - （element-ui 适配插件）
  - （iview 适配插件）
  - （ant-design-vue 适配插件）

Docs

To view the example 查看演示
 To view the document 查看文档

Installing

require: Vue 2.6+

npm install xe-utils vxe-table

Get on unpkg and cdnjs

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></script>

import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable, {
  size: 'small',
  tooltipConfig: {
    zIndex: 3000
  }
})

Import on demand

By using the babel-plugin-import , you can load components on demand and reduce the size of files. First installation, then update .babelrc file
借助插件 babel-plugin-import 可以实现按需加载组件，减少文件体积。然后在文件 .babelrc 中配置

npm install babel-plugin-import -D

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vxe-table",
        "style": true
      }
    ]
  ]
}

Now you can import components like
最后这样按需引入组件，就可以减小体积了

import {
  VXETable,
  Table,
  Column,
  Header,
  Body
} from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'

Vue.use(Table)
Vue.use(Column)
Vue.use(Header)
Vue.use(Body)

// The on-demand mode is not internationalized by default and needs to be imported by itself
// 按需加载的方式默认是不带国际化的，需要自行导入
VXETable.setup({
  i18n: (key, value) => VXETable.t(zhCNLocat, key)
})

I18n

npm install vxe-i18n

import Vue from 'vue'
import VueI18n from 'vxe-i18n'
import VXETable from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh_CN'
import enLocat from 'vxe-table/lib/locale/lang/en'

const messages = {
  zh_CN: {
    ...zhCNLocat
  },
  en: {
    ...enLocat
  }
}

const i18n = new VueI18n({
  locale: 'zh_CN',
  messages,
})

Vue.use(VXETable, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')

Example

<template>
  <div>
    <vxe-table ref="xTable" :data.sync="tableData">
      <vxe-table-column type="index" label="Number" width="80"></vxe-table-column>
      <vxe-table-column prop="name" label="Name"></vxe-table-column>
      <vxe-table-column prop="sex" label="Sex"></vxe-table-column>
      <vxe-table-column prop="address" label="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 10001,
          name: 'test1',
          role: 'developer',
          sex: 'Man',
          address: 'address abc123'
        }
      ]
    }
  }
}
</script>

Donation

If the project is very helpful to you, you can buy the author a cup of coffee.
如果这个项目对您有帮助，请作者喝杯咖啡吧。☕

onepenny/vxe-table