Vue3 Element-plus表格导出excel文件

沪上啊姨

已于 2024-02-19 17:52:53 修改

阅读量674

点赞数 8

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-01-25 17:32:46 首次发布

本文链接：https://blog.csdn.net/m0_69838795/article/details/135849793

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中安装并使用js-table2excel插件，展示如何收集数据、处理用户选择，并在满足条件后将数据导出为Excel文件。

摘要由CSDN通过智能技术生成

安装插件：

npm i js-table2excel

引入插件：

import table2excel from "js-table2excel";

table收集数据：

<el-table
      size="small"
      ref="multipleTableRef"
      :header-cell-style="{ background: '#f5f6fa', color: '#333333' }"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="name" label="名称" />
      <el-table-column property="img" label="图片" />
    </el-table>


const handleSelectionChange = (val: User[]) => {
    //收集选中的数据
  multipleSelection.value = val;
};

导出excel文件：

let arr = [
  {
    title: "名称", //名字自定义
    key: "name", //对应table表格里的property
    type: "text", //文字类型
  },
  {
    title: "图片", 
    key: "img",
    type: 'image', //图片类型
	width: 150,
	height: 150,
  },
];
// 导出
const onImportTable = () => {
    //判断有没有选中数据
  if (multipleSelection.value.length <= 0)
    return ElMessage.warning("请先选择要导出的数据");
  table2excel(
    arr,
    multipleSelection.value,
    'excel表名称'}`
  );
};