el-tabe 配合 xlsx 导出 excel 文件

一、安装依赖

bash 复制代码
pnpm add element-plus
bash 复制代码
pnpm add xlsx

二、在 main.js 引入

javascript 复制代码
import { createApp } from "vue";

import ElementPlus from "element-plus";

import "element-plus/dist/index.css";

import App from "./App.vue";



const app = createApp(App);

app.use(ElementPlus);

app.mount("#app");

三、使用 xlsx 导出

javascript 复制代码
<template>

  <div>

    <el-button type="primary" @click="exportExcel">导出Excel</el-button>

    <el-table :data="tableData" border style="width: 100%">

      <el-table-column prop="name" label="姓名" width="180"></el-table-column>

      <el-table-column prop="age" label="年龄" width="180"></el-table-column>

      <el-table-column prop="gender" label="性别" width="180"></el-table-column>

    </el-table>

  </div>

</template>

<script setup>

  import { ref } from "vue";

  import XLSX from "xlsx";

  // 模拟表格数据,实际中可以是从接口获取等来源的数据

  const tableData = ref([

    { name: "张三", age: 25, gender: "男" },

    { name: "李四", age: 30, gender: "女" },

    { name: "王五", age: 28, gender: "男" },

  ]);

  const exportExcel = () => {

    const worksheet = XLSX.utils.json_to_sheet(tableData.value);

    const workbook = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    XLSX.writeFile(workbook, "人员信息表.xlsx");

  };

</script>

<style scoped></style>
相关推荐
萌萌哒草头将军2 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫12 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中2 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊3 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿3 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj3 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝3 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3113 小时前
react必备JavaScript知识点(二)——类
前端·javascript
珠峰下的沙砾4 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
前端_学习之路4 小时前
javaScript--数据结构和算法
javascript·数据结构·算法