今天给小伙伴们分享一款功能超强大的Vue表格组件VxeTable。

e2f4b626274468fcdea5591d03179030.png

vxe-table 基于vue2.x构建的高效table表格组件,star高达2.5K+。支持行/列拖拽、排序筛选、虚拟滚动、懒加载、树形结构、xlsx导入导出、集成第三方库等功能。

30b09c01c4600c1a7a742201755e9218.gif

功能特性

  • 模块化表格、按需引入,减少项目大小;
  • 虚拟滚动、懒加载,渲染性能大幅提升;
  • 多种主题,多图标;
  • 多种表格类型(基础表格、复杂表格、树形表格、编辑表格、高级表格、大数据表格);
  • 扩展插件库;
9cfa534f2cd7a865d64e607cd6fbbc25.png

安装

$ npm i xe-utils vxe-table -S

引入组件

import Vue from 'vue';import 'xe-utils';import VxeTable from 'vxe-table';import 'vxe-table/lib/index.css';Vue.use(VxeTable);// 给vue挂载全局窗口实例Vue.prototype.$modal = VxeTable.modal;
27744c3d4f5121d954b0abd422d18f00.png

快速使用

官网文档提供了详细的演示及API操作。

2d2cd944776999f776347c1e7db3ab1e.png

基础表格

a36bb9be8af1fbb16d83ef0586030cd6.png

单元格工具提示+溢出省略号...

de1767b7ede168fa1a8d8cc22f50dd40.png

表格表头分组

9c2fd0a4ea0da6620268ab4380a25dc3.png

树形表格

effccdfd31c9f2a6de4e2c857a7750e9.png

弹窗编辑表格

fc2061b1536019677c8813dc41a94a59.png

全屏表格(表格最大化/还原)

bd05a2b0342d250f0678098fa50750f7.png

集成第三方库(element-ui、iview、antd)

so good,非常实用的一款多功能表格解决方案,如果想要了解更多功能,可以自行去查阅文档。

最后附上文档及项目地址。

# 文档地址https://xuliangzhan_admin.gitee.io/vxe-table/# 仓库地址https://github.com/x-extends/vxe-table

ok,就分享到这里。希望对大家有所帮助,欢迎一起交流分享技术知识!

Logo

前往低代码交流专区

更多推荐