vxeTable怎么导出excel文件

文章目录

  • 一、代码示例
  • 二、调用导出事件
    • 参数详解
      • 下载
      • 引用
  • 三、过滤某列数据导出


在这里插入图片描述

一、代码示例

     <vxe-button
        @click="exportDataEvent"
        circle
        icon="vxe-icon-download"
     >导出</vxe-button>
    
     <vxe-table
          border
          round
          stripe
          height="auto"
          ref="tableMain"
          :export-config="{}"
          align="center"
          size="small"
          :data="consumableList"
        >
          <vxe-column
            type="seq"
            title="序号"
            fixed="left"
            width="80"
          >
          </vxe-column>
         </vxe-table>
         

二、调用导出事件

   // methods方法
    exportDataEvent() {
      this.$refs.tableMain.exportData({
        type: "xlsx",
        filename: "仪器设备" ,
        original: false,
        mode: "all",
        isHeader: true,
        download: true,
        columnFilterMethod({ column }) {
          return column.field !== "operation";
        },
      });
    },

参数详解

  • type: 导出的文件类型。在这个例子中,我导出为 ‘xlsx’ 格式的 Excel 文件。
  • filename: 导出的文件名。
  • original: 是否导出源数据。如果设置为 false,则导出的数据会和表格中显示的数据一样(例如,如果你在表格中使用了格式化函数,那么导出的数据也会被格式化)。
  • mode: 导出的数据范围。如果设置为 ‘current’,则只导出当前页的数据;如果设置为 ‘all’,则导出所有数据。
  • isHeader: 是否导出表头。
  • download: 是否自动下载导出的文件。如果设置为 false,则 exportData 方法会返回一个 Promise,这个 Promise resolve 的值是一个包含了导出文件内容的 Blob 对象。

请注意,vxe-table 的 Excel 导出功能依赖于 xlsx 和 FileSaver 这两个库,所以在使用这个功能之前,你需要先安装这两个库

下载

npm install xlsx file-saver

引用

import 'xlsx'
import 'file-saver'

三、过滤某列数据导出

在 vxe-table 中,columnFilterMethod 方法用于在导出数据时过滤列。方法接收一个参数,这个参数是一个对象,包含了列的信息。如果这个方法返回 true,那么这一列会被导出;如果返回 false,那么这一列会被过滤掉,不会被导出。 如果你想过滤掉操作列,你可以在 columnFilterMethod 方法中检查列的 field 或 title 属性,然后根据这个属性的值来决定是否过滤这一列。例如,如果你的操作列的 field 属性是 ‘operation’。

你可以这样写:

columnFilterMethod({ column }) {
  return column.field !== 'operation';
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/702093.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AIGC绘画设计提示词篇:七大风格、直接可套用的MJ关键词模版

七大风格、直接可套用的MJ关键词模版 1、 具象描述基本结构&#xff08;词与词之间用英文逗号隔开&#xff09; 关键词框架1&#xff1a;主题/主体描述环境描述风格设定构图镜头设计图像属性&#xff08;渲染、质量、尺寸&#xff09; 关键词框架2&#xff1a;参考图主题/主体…

【CS.PL】Lua 编程之道: 控制结构 - 进度24%

3 初级阶段 —— 控制结构 文章目录 3 初级阶段 —— 控制结构3.1 条件语句&#xff1a;if、else、elseif3.2 循环语句&#xff1a;for、while、repeat-until3.2.1 输出所有的命令行参数3.2.2 while.lua3.2.3 repeat.lua及其作用域 &#x1f525;3.2.4 for.lua (For Statement)…

【网络编程】地址族与数据序列

IP是Internet Protocol简写&#xff0c;是为了收发网络数据而分配给计算机的值&#xff0c;端口号是为区分程序中创建的套接字而分配给套接字的序号。 网络地址分为两类&#xff1a;IPv4(4个字节地址族)&#xff0c;IPv6(6个字节地址族) 网络地址初始化&#xff0c;主要针对服…

微软Win11 22H2/23H2六月更新补丁KB5039212发布!附完整更新日志

系统之家于6月12日发出最新报道&#xff0c;微软向Win11用户推出六月更新补丁KB5039212&#xff0c;22H2版本号升为22621.3737&#xff0c;23H2版本号升为22631.3737。此次更新解决了可能导致系统无法从休眠状态恢复等问题。感兴趣的用户可以继续阅读以下内容&#xff0c;获取更…

训练大模型自动在RAG和记忆间选择

现如今&#xff0c;检索增强生成(Retrieval-augmented generation&#xff0c;RAG)管道已经能够使得大语言模型(Large Language Models&#xff0c;LLM)在其响应环节中&#xff0c;充分利用外部的信息源了。不过&#xff0c;由于RAG应用会针对发送给LLM的每个请求&#xff0c;都…

为什么有的网站接口有traceid,有的网站接口没有?

背景&#xff1a;打开百度&#xff0c;输入任意内容&#xff0c;点击百度一下。我们从左侧可以看到有2个接口是有TraceID的 -其他接口是没有的 下面分享我的理解&#xff1a; 对于高并发的业务&#xff08;访问频繁&#xff09;的接口&#xff0c;系统会生成非常多的数据&…

迅狐短视频矩阵管理系统核心功能

一、多平台管理&#xff1a;连接多个主流自媒体平台&#xff0c;满足多平台、多账号、多角色的协调需求 在现如今的多元化媒体环境中&#xff0c;一个优秀的内容创作者需要同时管理多个自媒体平台&#xff0c;并以不同的身份角色展现自己。迅狐短视频矩阵管理系统强大的多平台…

明基的台灯值得入手吗?书客、柏曼真实横向测评对比

近年来人们在工作、学习、娱乐等方面对电子设备的依赖程度也越来越高&#xff0c;长时间使用电子设备会对眼睛造成一定的伤害&#xff0c;如眼疲劳、干涩、近视等。人们对于能够缓解眼疲劳的照明产品的需求逐渐增加。护眼台灯能够更好地模拟自然光&#xff0c;提供更加柔和舒适…

LeetCode刷题之HOT100之不同的二叉搜索树

1、题目描述 2、逻辑分析 给定一个有序序列 1⋯n&#xff0c;为了构建出一棵二叉搜索树&#xff0c;我们可以遍历每个数字 i&#xff0c;将该数字作为树根&#xff0c;将 1⋯(i−1) 序列作为左子树&#xff0c;将 (i1)⋯n 序列作为右子树。接着我们可以按照同样的方式递归构建…

Web测试工具Burp Suite 企业版引入自定义扫描检查

Burp Suite 是一款领先的Web应用程序安全测试工具。它被广泛用于识别和修复Web应用程序中的漏洞。通过使用Burp Suite&#xff0c;组织可以显著提升其Web应用程序的安全性&#xff0c;及时发现并修复漏洞&#xff0c;保障业务的持续运行和数据安全。 简而言之&#xff0c;BChe…

HBase数据存储

1、数据模型 Namespace&#xff08;表命名空间&#xff09;&#xff1a;表命名空间不是强制的&#xff0c;当想把多个表分到一个组去统一管理的时候才会用到表命名空间。Table&#xff08;表&#xff09;&#xff1a;一个表由一个或者多个列族组成。数据属性&#xff0c;都在列…

(五)React受控表单、获取DOM

1. React受控表单 概念&#xff1a;使用React组件的状态&#xff08;useState&#xff09;控制表单的状态 准备一个React状态值 const [value, setValue] useState()通过value属性绑定状态&#xff0c;通过onChange属性绑定状态同步的函数 <input type"text"…

精益思维在人工智能中的应用体现

随着AI技术的广泛应用&#xff0c;如何提高其效率、降低成本、优化性能&#xff0c;成为了业界关注的焦点。精益思维作为一种追求卓越、持续改进的管理理念&#xff0c;其在人工智能中的应用正逐渐展现出巨大的潜力。 一、数据精益化管理。数据是AI技术的核心&#xff0c;而数据…

高内聚与低耦合:工作中的重要性与应用

目录 ​编辑 前言 1.什么是高内聚与低耦合&#xff1f; 2.为什么高内聚和低耦合非常重要&#xff1f; 3.工作中的运用 总结 前言 在软件开发领域&#xff0c;高内聚与低耦合是设计原则中非常重要的概念。高内聚指的是模块内部的各个元素紧密地结合在一起&#xff0c;完成…

StartAI”梦想合伙人 ”招募计划

我们正火热招募AI设计师产品合伙人&#xff01;如果你对AI技术充满好奇&#xff0c;对设计有着独特的见解和热情&#xff0c;亦或者你想在日常的设计工作中提高效率&#xff0c;无论你是电商设计师、UI设计师、建筑师、插画师等其他各类设计领域的人才。那么这就是你不容错过的…

pyechart 创建柱形图

Pyecharts 是一个基于 Python 的开源数据可视化库&#xff0c;用于创建各种交互式的图表和可视化效果。它是在 Echarts 的基础上进行封装和优化&#xff0c;Echarts 是一个流行的 JavaScript 数据可视化库pyecharts 中文网站 : https://pyecharts.org/# pyecharts 模块 还支持…

工业物联网和工业互联网有啥区别?

如今数字化转型已成为工业领域的必然趋势&#xff0c;其中&#xff0c;工业物联网&#xff08;IIoT&#xff09;和工业互联网作为推动工业数字化转型的重要力量&#xff0c;它们的共同目标都是为了提升工业生产的效率、降低成本并推动创新&#xff0c;但在技术特点和应用场景上…

牛客热题:旋转矩阵

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题&#xff1a;旋转矩阵题目链接方法一&#x…

使用Vue3+ElementPlus+高德地图实现在浏览器中搜索地点并被标记在地图中

效果描述 在页面的输入框中输入想要查询的地点&#xff0c;在输入框的下方会提示跟输入的关键字有关地点&#xff0c;然后按下回车键或者选择下方罗列的地点即可让地图跳转到搜索的位置。 效果展示 页面渲染完成的时候 输入想要查询的地点 按下回车键之后 代码实现 <temp…

通过语言大模型类学习python,卡哪问哪(一)

代码语法学习&#xff0c;代码解析 import matplotlib.pyplot as plt import numpy as np import PIL import tensorflow as tffrom tensorflow import keras from tensorflow.keras import layers from tensorflow.keras.models import Sequential 一、语法解析 &#xff08;…