Vuc-vxe-table NPM

vxe-table

一个简单实用的 Vue 表组件，与任意组件库兼容

设计理念
- 精简的 API（简洁、高效的 API 设计）
- 模块化表格、插件化扩展（功能模块解耦，支持按需加载）
- 强大的功能的同时兼具性能（支持横向、纵向虚拟滚动、灵活的配置项、不污染全局样式及变量）
计划
- v1 100% 实现表格的一切实用的功能
- v2 95% 性能优化，同时兼具功能与性能
- v3 0% 实现重构，渲染性能大幅提升，基于 Vue3 并使用 typescript 开发

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

Browser Support


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

Features

Basic table （基础功能）
Dynamic Grid （配置式表格）
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 （序号)
Highlight row and column （高亮行、列)
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（键盘导航）

Modules

(核心)
- Modules （内置模块）
  - （表头）
  - （表主体）
  - （表尾）
  - （图标）
  - （筛选）
  - （加载中）
  - （提示信息）
  - （快捷菜单）
  - （导出）
  - （按键导航）
  - （响应式）
- Component （增强组件）
  - （动态表格）
  - （静态列）
  - （分页）
  - （工具栏）
  - （复选框）
  - （单选框）
  - （输入框）
  - （模态窗口）
  - （按钮）
- Plugins（插件）
  - 增强插件
    - (菜单插件)
    - (图表插件)
    - (Excel 插件)
  - 适配插件

Docs

To view the user guide 使用指南

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

Installing

require: Vue 2.6+
require: xe-utils 2.2+

npm install vuc-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 'xe-utils'
import VXETable from 'vuc-vxe-table'
import 'vuc-vxe-table/lib/index.css'

Vue.use(VXETable)

Internationalization

npm install vxe-i18n

import Vue from 'vue'
import VueI18n from 'vxe-i18n'
import VXETable from 'vuc-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 :data="tableData">
      <vxe-table-column type="index" title="序号" width="80"></vxe-table-column>
      <vxe-table-column field="name" title="名字"></vxe-table-column>
      <vxe-table-column field="sex" title="性别"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 10001,
          name: '名字1',
          role: '角色',
          sex: '男',
          address: '深圳市 圳市 市 xxx'
        }
      ]
    }
  }
}
</script>