在企业开发大型项目中，最核心就是表格列表了，vxe-table 是一个全功能的表格库，2019年开源以来国内最强表格组件了，只要项目是使用 vue2 和 vue3 的都能直接引入使用。完全兼容 vue 所有生态组件，直接就能集成使用。
官网：vxetable.cn/
Gitee：gitee.com/x-extends/v…
Github：github.com/x-extends/v…
安装方式
npm install vxe-pc-ui@4.3.6 vxe-table@4.9.9
// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...
createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...
渲染一个简单表格
<template>
<div>
<vxe-table
:data="tableData">
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
</vxe-table>
</div>
</template>
<script setup>
import { ref } from 'vue'
const tableData = ref([
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])
</script>
冻结列
可以灵活的将常用列冻结在左侧或者右侧
单选
多选
鼠标滑动多选
支持通过鼠标滑动选择多行
排序
支持单列排序、多字段排序、本地排序、服务端排序等
筛选
非常强大的筛选，。支持内置筛选，也可以根据业务需求自定义渲染器扩展实现
表尾合计
支持单行、多行表尾合计
行拖拽
支持行拖拽排序功能
列拖拽
支持强大列拖拽排序功能，排序二次确认等
自定义列
支持实现用户个性化数据保存功能，比如实现列排序、列宽拖拽调整大小、列排序等，将结果储存到本地或者服务端，实现用户个性化数据功能。
树结构
支持强大树结构，支持秒级渲染超大数据量的虚拟树
右键菜单
支持右键菜单，一级和二级菜单
数据分页
集成分页功能，可以实现纯前端分页或者服务端分页
查询表单
集成表单功能，支持折叠表单，当表单项很多时，支持折叠收起来
可编辑表格
支持各种单元格编辑，兼容全部 vue 生态组件，可以支持渲染在单元格中
单元格图片预览与上传附件
可编辑数据校验
支持非常灵活的表格数据校验
导入、导出 xlsx
支持多种格式导出 htm、csv、xlsx、pdf 等
弹窗
强大的窗口组件，支持任意拖拽、缩放调整、多窗口等
打印
强大打印功能，支持分页打印，自定义页眉页尾等。功能非常多灵活
表格搜索
支持列表搜索、树搜索
表格行与列反转
无限滚动
横向无限滚动
纵向无限滚动
横向与纵向无限滚动
大数量虚拟列表
支持动态行高虚拟滚动、动态列宽虚拟滚动、秒级渲染超大数据量列表
单元格选择
支持通过单元格选取、单选和多选区域
表尾合计指定范围单元格
透视表聚合函数
Excel 复制粘贴
支持 excel 和 wps 中复制粘贴数据
轻量级单元格图表
超高性能的轻量级单元格图表，秒级渲染十万级图表数据
查找与替换
支持虚拟列表查找与替换数据
