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@next

npm

import { createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

createApp(App).use(VXETable).mount('#app')

示例：在 Vue 组件中使用 Vxe-table

<template>
<div>
  <vxe-table :data="tableData">
    <vxe-column type="seq" title="Seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-colgroup title="Group1">
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="address" title="Address"></vxe-column>
    </vxe-colgroup>
  </vxe-table>
</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
])
</script>

示例：在 Vue 组件中使用 Vxe-grid

<template>
<div>
  <vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
</div>
</template>