vxe-table
A fully functional Vue Table, to meet most of the Table all requirements, and perfect compatibility with any component library.
一个全功能的 Vue 表格,满足绝大部分对 Table 的一切需求,与任意组件库完美兼容
-
Design concept 设计理念
- 精简的 API(简洁、高效)
- 模块化表格(功能模块解耦,支持按需加载)
- 更加灵活的自定义配置项,更高的可扩展性(兼容任意组件库,不污染全局样式及变量)
- 强大的功能的同时兼具性能(支持横向、纵向虚拟滚动)
-
Plan 计划
- v1 100% 实现表格的一切实用的功能
- v2 90% 性能优化,同时兼具功能与性能
- 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(工具栏)
- Save the operational state of the column(保存列的操作状态)
- Tree table (树形表格)
- Editable CRUD(增删改查)
- Editable validate(数据校验)
- DataProxy(数据代理)
- Keyboard navigation(全键盘操作)
Modules
All modules support loading on demand.(所有的模块都支持按需加载)
(核心)
- Extends (扩展模块)
(高级表格)
- Modules (功能模块)
(列)
(单元格)
(表头)
(表内容)
(表尾)
(图标)
(筛选)
(加载中)
(提示信息)
(快捷菜单)
(导出)
(响应式)
(分页 )
(工具栏)
(复选框)
(单选框)
(输入框)
(消息提示框)
(按钮)
- Plugins(插件)
(element-ui 适配插件)
(iview 适配插件)
(ant-design-vue 适配插件)
- Extends (扩展模块)
Docs
To view the example 查看演示
To view the document 查看文档
Installing
require: Vue 2.6+
npm install xe-utils vxe-table
<!-- 引入样式 --><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>
Vue
Import on demand
By using the babel-plugin-import , you can load modules 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 modules like (The minimal packet is ≈ 120KB, gzip ≈ 40KB)
最后这样按需引入模块,就可以减小体积了(最小的包大约是 ≈ 120KB, gzip ≈ 40KB)
VueVueVueVueVueVue // The on-demand mode is not internationalized by default and needs to be imported by itself// 按需加载的方式默认是不带国际化的,需要自行导入VXETable
Internationalization
npm install vxe-i18n
const messages = zh_CN: ...zhCNLocat en: ...enLocat const i18n = locale: 'zh_CN' messages Vue i18n
Example
Donation
If the project is very helpful to you, you can buy the author a cup of coffee.
如果这个项目对您有帮助,请作者喝杯咖啡吧。☕
License
Copyright (c) 2019-present, Xu Liangzhan