vxe-table的安装与使用

vxe-table的安装与使用

vx-table是一个基于Vue(支持Vue3)的PC端全功能表格组件

相信大家在做vue前端项目时，有不少的表格，其中表格也要实现各种功能，包括增删改查、导入导出、打印等，今天介绍的这个组件是比element-plus中的el-table功能更完整的一个组件，使用该组件时，想要导入导出等功能只需要在配置项中写上即可，接下来让我们开始正题

vxe-table的安装与引入

npm i vxe-table//下载包

//在main.js中引入注册
improt VXETable from 'vxe-table'
import 'vxe-table/lib/styles.css'
app.use(VXETable)

vxe-table的使用

这里我们以要实现如图所示的功能为例

这里我使用的是vxe-grid组件
vxe-grid是配置式表格，实现功能通过配置项的形式v-bind='gridOptions’传入组件中实现

1.表单筛选

这里表单我使用的是插槽，也可以通过配置girdOptions中的formConfig实现

2. 表格结构（列的配置）

grid的props参数中的columns是对列的配置，在列的配置中，可以设置列的字段、标题，如果是自定义操作可以使用插槽

3.功能按钮

功能按钮可以在form表单中写，也可以写在工具栏中的按钮列表中，这里我是写在了工具栏的按钮列表中，使用的插槽，需要现在props中的toolbarConfig进行配置


这里也可以通过配置toolbarConfig中的buttons对功能按钮进行配置，通过配置式实现的功能按钮，可以通过给grid绑定toolbar-button-click方法来执行功能按钮被点击时的回调

在回调中通过code判断触发的是那个功能按钮

4.工具栏

简单功能：
在toolbarConfig中进行配置，值可以是一个配置对象，也可以直接是true

如果还需要对这些工具进行更详细的配置，可以在girdOptions中写该工具的详细配置，例如：exportConfig:{}，详细参考官方文档

5.分页

分页可以通过插槽，也可以通过配置项来实现，这里我使用的是插槽

通过配置项实现：在gridOptions中配置pagerConfig

分页使用配置项要注意的是：分页情况下默认读取响应结果中page.total和result属性，如果响应回来的结果格式不符，可以通过修改proxyConfig中的props来完成

6.数据代理

项目中表格数据并不是固定数据，而是通过请求获取回来的数据，可以通过配置proxyConfig参数，默认直接读取结果，响应结果为数组，可以通过props修改默认值

return后面接受一个Promise, 即获取数据的请求
如果pager和form是通过配置参数实现的，可在query回调函数的参数中接收到
这里的findList模拟的请求

如果需要更多更详细的使用，可参考vxe-table官网