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

这篇具有很好参考价值的文章主要介绍了vben admin BasicTable 表格的进阶使用之带搜索区域以及对于 useTable 中方法使用别名。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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

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

一、上代码

<template>
   <BasicTable @register="registerTable">
     <template #toolbar>
       <a-button type="primary" @click="exportData"> 数据导出 </a-button>
     </template>
   </BasicTable>
</template>
<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 >

二、上最终效果

vben组件库basictable和usetable,前端框架,javascript,前端,vue.js

三、代码分析

1.创建实例

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

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

vben组件库basictable和usetable,前端框架,javascript,前端,vue.js

2. 表格设置工具的配置

默认表格的设置区域的样式是这样子的,但是实际上并不需要这些,只保留一个刷新就可以了
vben组件库basictable和usetable,前端框架,javascript,前端,vue.js
配置项

showTableSetting	boolean	false	-	显示表格设置工具	
tableSetting	TableSetting	-	-	表格设置工具配置,见下方 TableSetting

vben组件库basictable和usetable,前端框架,javascript,前端,vue.js

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

vben组件库basictable和usetable,前端框架,javascript,前端,vue.js这里使用了 basic table 的插槽来实现的
vben组件库basictable和usetable,前端框架,javascript,前端,vue.js

        <BasicTable @register="registerTable">
          <template #toolbar>
            <a-button type="primary" @click="exportData"> 数据导出 </a-button>
          </template>
        </BasicTable>

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

业务需求,在点击数据导出按钮的时候,执行 exportData() 函数需要发请求获取对应的文件 url 地址来实现下载功能
但是这个请求是需要带表格搜索区域的时间条件作为参数的,所以我需要获取到搜索表单中的数据
在官方文档中可以看到,table 的 methods 中是有 getForm() 的
vben组件库basictable和usetable,前端框架,javascript,前端,vue.jsvben组件库basictable和usetable,前端框架,javascript,前端,vue.js
在 exportData() 方法中,调用 getForm() 方法,获取到搜索表单实例对象
再调用 form 实例对象的getFieldsValue() 来获取数据

 let data = getForm().getFieldsValue();
  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);
        });
    });
  }

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

业务表单需要在某些时机来刷新,而不是手动点击表单设置工具区域的刷新按钮,所以就需要表格实例对象的 reload() 方法
vben组件库basictable和usetable,前端框架,javascript,前端,vue.js

  const [registerTableA, { reload, getForm }] = useTable({
    .....
  });

  reload();

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


遗留思考 (已解决)

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

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

  const [registerTableA, { reload, getForm }] = useTable({
    .....
  });
  const [registerTableB, { reload, getForm }] = useTable({
 	  .....
  });
 

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

  const [registerTableA, { reload as reloadA, getForm as getFormA }] = useTable({
    .....
  });
  const [registerTableB, { reload as reloadB, getForm  as getFormB }] = useTable({
 	  .....
  });
  reloadA();
  reloadB(); 

猜测失败

//直接编译失败了
  const [registerTableA, { reload as reloadA, getForm as getFormA }] = useTable({
    .....
  });
  const [registerTableB, { reload as reloadB, getForm  as getFormB }] = useTable({
 	  .....
  });
  reloadA();
  reloadB(); 
// reloadA is not defined
  const [registerTableA, { reloadA :reload, getForm}] = useTable({
    .....
  });
  const [registerTableB, { reloadB :reload, getForm}] = useTable({
 	  .....
  });
  reloadA();
  reloadB(); 

解决方案

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

// reloadA is not defined
  const [registerTableA, { reload :reloadA, getForm}] = useTable({
    .....
  });
  const [registerTableB, { reload :reloadB, getForm}] = useTable({
 	  .....
  });
  reloadA();
  reloadB(); 

总结

之前一直以为需要先通过给 table 或者 form 绑定 ref ,才能执行到 reload() , getFieldsValues() … 方法,但是实际上这种方式获取的好像是 DOM 对象,而不是实例对象
所以在 useTable 的时候将 reload 写进去页面中就会有 reload() 方法可以直接调用了文章来源地址https://www.toymoban.com/news/detail-787297.html

到了这里,关于vben admin BasicTable 表格的进阶使用之带搜索区域以及对于 useTable 中方法使用别名的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • naive-ui-admin BasicTable 列表操作栏显示图标icon

    效果图 在使用BasicTable的页面添加引用,这里随便弄了个icon  自定义列  这里label设置为空,icon就是刚刚导入的图标,toolTip是自定义属性,在原来封装好的组件里添加的,不然只有一个图标可能不是很明确。 自定义的如下: 打开components/Table/src/components/TableAction.vue ,修改

    2024年04月08日
    浏览(61)
  • 管理后台UI框架vue-vben-admin运行

    Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。 Github地址: https://github.com/anncwb/vue-vben-admin 文档地址: https://vvbin.cn/doc-next/ Tailwind CSS Ant Design Vue 2.0 node 和 git -项目开发环境 Vi

    2024年02月06日
    浏览(37)
  • yudao-ui-admin-vben管理后台:基于最新vben 框架的企业级管理后台应用解决方案

    摘要: 本文主要介绍了yudao-ui-admin-vben管理后台,一个基于最新vben 框架的企业级管理后台应用解决方案。文章首先概述了yudao-ui-admin-vben管理后台的技术栈和功能特点,然后深入探讨了其架构设计、核心模块实现以及性能优化等方面的技术细节。最后,文章总结了yudao-ui-admi

    2024年04月27日
    浏览(33)
  • vben-admin 页面以及部分代码 常见问题 解析 持续更新····

    介绍 | Vben Admin (vvbin.cn) https://doc.vvbin.cn/guide/introduction.html ----------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------  

    2024年02月04日
    浏览(41)
  • vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理

     ue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。目标:打造好看 易用 开箱即用 的netcore一体化框架。Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。 之前使用layui是时候 狠心升级下了。 只为了好看----------于是  小白教

    2024年01月16日
    浏览(36)
  • 【Vue】Vue 使用 Print.js 打印选中区域的html,用到的是Element ui table表格,解决页面样式不出现或者table表格样式错乱问题!!!

    需求 : 打击打印按钮,文字内容以及表格中的内容 解决方案 加上这句就好了!完美! 一、因为表格数据过多,之前加了表格滚动条,但是打印出来 会把表格上的滚动条也打印出来,所以这里改成了 给弹框加滚动条,去掉表格中的滚动条 2.1 原因: table-layout: fixed导致的,

    2024年02月09日
    浏览(66)
  • Django admin管理工具TabularInline表格内联

    TabularInline 是 Django Admin 中的一个内联模型选项,用于在父模型的编辑页面中以表格形式显示关联的子模型对象。下面是对 TabularInline 的一些详解: 显示方式 : TabularInline 以表格的形式显示子模型对象。每个子模型对象将以一行的形式展示,显示相关字段的值。 编辑和新增

    2024年02月16日
    浏览(27)
  • 常用的表格检测识别方法 - 表格区域检测方法(下)

    ——书接上文   Training 半监督网络的训练分两步进行:a)对标记数据独立训练学生模块,由教师模块生成伪标签;b)结合两个模块的训练,得到最终的预测结果。   伪标签框架     实验   数据集: TableBank是文档分析领域中用于表识别问题的第二大数据集。该数据集有417,00

    2024年02月05日
    浏览(42)
  • 常用的表格检测识别方法-表格区域检测方法(上)

    ​     表格检测识别一般分为三个子任务:表格区域检测、表格结构识别和表格内容识别。本章将围绕这三个表格识别子任务,从传统方法、深度学习方法等方面,综述该领域国内国外的发展历史和最新进展,并提供几个先进的模型方法。   3.1 表格区域检测方法   表格检测

    2024年02月05日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包