您现在的位置是：首页 > 技术教程 正文

vben admin BasicTable 表格的进阶使用之带搜索区域以及对于 useTable 中方法使用别名

admin 阅读： 2024-04-02
后台-插件-广告管理-内容页头部广告（手机）

vben admin BasicTable 表格的进阶使用之带搜索区域

  • 前言
  • 一、上代码
  • 二、上最终效果
  • 三、代码分析
    • 1.创建实例
    • 2. 表格设置工具的配置
    • 2.使用 table 的插槽来放置按钮
    • 3.获取搜索区域表单的值
    • 4.实现在外部调用表单的 reload()
  • 遗留思考 (已解决)
    • 解决方案
  • 总结

前言

很久之前看了下关于 vben 的基础使用,最近项目需求开始用了,业务需要一个带搜索区域的表格,今天写完有点懵逼,来记录的过程中整理下思路~~

这里是之前写过的关于 vben admin BasicTable 表格的基本使用

一、上代码

<template> <BasicTable @register="registerTable"> <template #toolbar> <a-button type="primary" @click="exportData"> 数据导出 a-button> template> BasicTable> template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<script lang="ts" setup> import { BasicForm, FormSchema } from '/@/components/Form'; import { BasicTable, useTable } from '/@/components/Table'; import { getBasicColumns } from './details/tableData'; import { reactive, ref, unref, watch, nextTick } from 'vue'; import { getTowersInfo, towerLatestData } from '/@/api/bu/device/device'; import { towerBillPage, exportTowerHistoryToExcel } from '/@/api/bu/device/towerBill'; //这里是表格中搜索区域表单的配置,就和 FORM 的配置是一样的 const detailSearchForm: FormProps = { baseColProps: { lg: 6, md: 8 }, labelWidth: 90, schemas: [ { label: '工作类型', field: 'workType', component: 'Select', componentProps: { dictType: 'tower_bill_type', }, }, { label: '单据时间', field: 'startTime', component: 'RangePicker', componentProps: { format: 'YYYY-MM-DD HH:mm:ss', }, }, ], }; const [registerTable, { reload, getForm }] = useTable({ api: towerBillPage, beforeFetch: (params) => { params.deviceId = deviceId; return params; }, afterFetch: (result) => { // handleTowerHistory是自己写的关于拿到返回数据后进行的一些处理的函数 return handleTowerHistory(result); }, columns: getBasicColumns(), showIndexColumn: false, useSearchForm: true, formConfig: detailSearchForm, showTableSetting: true, tableSetting: { // 是否显示刷新按钮 redo: true, size: false, // 是否显示字段调整按钮 setting: false, // 是否显示全屏按钮 fullScreen: false, }, canResize: true, }); // 使用在表格插槽中放了一个按钮,对应的点击事件,是用来下载文件的 function exportData() { // getForm().resetFields() let data = getForm().getFieldsValue(); exportTowerHistoryToExcel({ deviceId, createTime: data.startTime }).then((url) => { let fileName = url.slice(url.lastIndexOf('/') + 1); fetch(url) .then((res) => res.blob()) .then((blob) => { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); // 下载文件的名称及文件类型后缀 link.download = fileName; document.body.appendChild(link); link.click(); //在资源下载完成后 清除 占用的缓存资源 window.URL.revokeObjectURL(link.href); document.body.removeChild(link); }); }); } </script >
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79

二、上最终效果

在这里插入图片描述

三、代码分析

1.创建实例

我这里使用 useTable 的方式
如果需要开启搜索区域,在 useTable 的配置过程中需要加上下面的配置项

useSearchForm boolean false 使用搜索表单
formConfig any 表单配置，参考表单组件的 Props

在这里插入图片描述

2. 表格设置工具的配置

默认表格的设置区域的样式是这样子的,但是实际上并不需要这些,只保留一个刷新就可以了
在这里插入图片描述
配置项

showTableSetting boolean false - 显示表格设置工具 tableSetting TableSetting - - 表格设置工具配置，见下方 TableSetting
  • 1
  • 2

在这里插入图片描述

2.使用 table 的插槽来放置按钮

在这里插入图片描述这里使用了 basic table 的插槽来实现的
在这里插入图片描述

<BasicTable @register="registerTable"> <template #toolbar> <a-button type="primary" @click="exportData"> 数据导出 a-button> template> BasicTable>
  • 1
  • 2
  • 3
  • 4
  • 5

3.获取搜索区域表单的值

业务需求,在点击数据导出按钮的时候,执行 exportData() 函数需要发请求获取对应的文件 url 地址来实现下载功能
但是这个请求是需要带表格搜索区域的时间条件作为参数的,所以我需要获取到搜索表单中的数据
在官方文档中可以看到,table 的 methods 中是有 getForm() 的
在这里插入图片描述在这里插入图片描述
在 exportData() 方法中,调用 getForm() 方法,获取到搜索表单实例对象
再调用 form 实例对象的getFieldsValue() 来获取数据

let data = getForm().getFieldsValue();
  • 1
function exportData() { // getForm().resetFields() let data = getForm().getFieldsValue(); exportTowerHistoryToExcel({ deviceId, createTime: data.startTime }).then((url) => { let fileName = url.slice(url.lastIndexOf('/') + 1); fetch(url) .then((res) => res.blob()) .then((blob) => { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); // 下载文件的名称及文件类型后缀 link.download = fileName; document.body.appendChild(link); link.click(); //在资源下载完成后 清除 占用的缓存资源 window.URL.revokeObjectURL(link.href); document.body.removeChild(link); }); }); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

4.实现在外部调用表单的 reload()

业务表单需要在某些时机来刷新,而不是手动点击表单设置工具区域的刷新按钮,所以就需要表格实例对象的 reload() 方法
在这里插入图片描述

const [registerTableA, { reload, getForm }] = useTable({ ..... }); reload();
  • 1
  • 2
  • 3
  • 4
  • 5

这样在需要刷新表单的时候执行 reload 就可以了

遗留思考 (已解决)

如果一个页面当中有多个表单实例的话 , emmm 分别需要在两个位置执行这两个表单的 reload()

如果出现下面的情况,怎样区分 是哪个表单的 relaod 呢?
(盲猜测以下代码会报错 毕竟出现了两个 reload 两个 getForm )

const [registerTableA, { reload, getForm }] = useTable({ ..... }); const [registerTableB, { reload, getForm }] = useTable({ ..... });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

(继续猜测,没时间验证,等真的遇到可以试试看? 主要还是对 vue3 了解太差了) (验证过了,失败)

const [registerTableA, { reload as reloadA, getForm as getFormA }] = useTable({ ..... }); const [registerTableB, { reload as reloadB, getForm as getFormB }] = useTable({ ..... }); reloadA(); reloadB();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

猜测失败

//直接编译失败了 const [registerTableA, { reload as reloadA, getForm as getFormA }] = useTable({ ..... }); const [registerTableB, { reload as reloadB, getForm as getFormB }] = useTable({ ..... }); reloadA(); reloadB();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
// reloadA is not defined const [registerTableA, { reloadA :reload, getForm}] = useTable({ ..... }); const [registerTableB, { reloadB :reload, getForm}] = useTable({ ..... }); reloadA(); reloadB();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

解决方案

这里主要还是 ES6 解构赋值的基本功了, 在 结构赋值中变量命名冲突的问题，可以通过使用别名的方式来解决

// reloadA is not defined const [registerTableA, { reload :reloadA, getForm}] = useTable({ ..... }); const [registerTableB, { reload :reloadB, getForm}] = useTable({ ..... }); reloadA(); reloadB();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

总结

之前一直以为需要先通过给 table 或者 form 绑定 ref ,才能执行到 reload() , getFieldsValues() … 方法,但是实际上这种方式获取的好像是 DOM 对象,而不是实例对象
所以在 useTable 的时候将 reload 写进去页面中就会有 reload() 方法可以直接调用了

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表