00、背景
vxe-grid 非常好用，大部分功能都可以通过配置来完成。
以前很多需要手工实现的，都内置好了。
推荐理由至少有以下几点：
- template 部分的代码会大幅度变少
- 和ElementUI共同使用没有冲突
- 作者持续维护
01、效果
完整功能：
服务端排序代理、服务端筛选代理、服务端分页代理、服务端增删改查、服务端导入导出，由 vxe-grid 代理数据转换，只需要配置好数据源即可；
非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来。以下截图所有UI都可以通过配置生成。
- 可以通过配置 form-config 实现动态表单，还可以通过 titlePrefix 或 titleSuffix 设置标题提示信息
- 对于分页场景下，如果想要保留选中状态，可以通过设置 checkbox-config 的 reserve 属性
- 通过 checkMethod 设置个性化列禁止勾选
02、vxe-table & vxe-grid
vxe-table
一款基于Vue的表格插件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...等功能
vxe-grid
vxe-table内置的一个组件。
优点
- 大数据表格
- 自带打印功能：区域、分页、模板、样式等打印功能
说明
- vxe-table 只能用于静态列（vxe-table-column，避免使用 v-for 去动态修改，如果要动态列（使用 v-grid）
- vxe-grid 支持一切动态场景
- grid 继承 table 100%的功能，vxe-grid 的性能也比 vxe-table 快一倍
- vue 多数情况还是推荐使用语义化标签的形式；而对于动态场景用 grid 就更加灵活，可以实现远程配置化一体化
设计理念
- 面向现代浏览器，高效的简洁 API 设计
- 模块化表格、按需加载
- 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能
安装
版本：vue 3.x
npm install xe-utils vxe-table@nextnpm
import { createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount('#app')示例：在 Vue 组件中使用 Vxe-table
示例：在 Vue 组件中使用 Vxe-grid