vue上传CSV文件渲染表格

最新推荐文章于 2024-04-10 16:18:29 发布

小桥流水人家丶

最新推荐文章于 2024-04-10 16:18:29 发布

阅读量262

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xu568110526/article/details/129669194

版权

本文介绍了如何在Vue.js项目中利用Papaparse库解析CSV文件，并将数据绑定到前端表格进行展示。通过执行'npm install papaparse'命令，可以将这个库引入到项目中，实现高效且便捷的CSV数据处理。

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

下载：npm install papaparse

<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :on-change="handleChange"
      :file-list="fileListUpload"
      accept=".csv"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-table
      :data="tableData"
      border
      style="width: 50%"
      :header-cell-style="{ background: '#EEF6FD', color: '#251E25' }"
      slot="empty"
    >
      <el-table-column
        prop="a"
        label="#"
        width="50%"
        align="center"
      ></el-table-column>
      <el-table-column prop="b" label="字段名" align="center">