vue+element ui 实现导入.csv文件数据到表格中

使用papaparse插件来进行对.csv文件的导入，再结合element ui的表格来显示文件中的数据。

1.安装papaparse的依赖

1.npm install papaparse

2.在页面中引用

import Papa from 'papaparse';

3.使用
papaparse的调用形式

  Papa.parse(file, {
    complete: function(results) {
      console.log(results);//返回的csv的数据
    }
  });

3.1首先创建按钮事件，并选择只接受.csv的文件类型以及表格

<el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :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="number" label="#" width="50%" align="center"></el-table-column>
           <el-table-column prop="name" label="字段名" align="center"></el-table-column>
           <el-table-column prop="nameRemark" label="备注名" align="center"></el-table-column>
           <el-table-column prop="index" label="索引字段" align="center"></el-table-column>
    </el-table>
//data中的数据
     data(){
     	return{
      	fileTemp: null,
        fileListUpload: [],
        tableData: [],
     }
     }
      

3.2编写上传事件的内容

handleChange(file, fileList) {
 	this.fileTemp = file.raw
   	if (this.fileTemp) {
      	if ((this.fileTemp.type == '.csv') || (this.fileTemp.type == 'application/vnd.ms-excel')) {
        this.importcsv(file.raw)
    	} else {
       	this.$message({
         	type: 'warning',
          	message: '附件格式错误，请删除后重新上传！'
       	 })
     	}
   	} else {
    	this.$message({
   			type: 'warning',
            message: '请上传附件！'
        	})
  		}
},

3.3调用导入的方法

importcsv (obj) {
        let _this = this//如果需要点击事件结束之后对DOM进行操作使用)_this.xx=xx进行操作
        Papa.parse(obj, {
          complete (results) {
            console.log(results)//这个是csv文件的数据
            let data = []
            //遍历csv文件中的数据，存放到data中 方法不唯一，可自己更改
            for (let i = 0; i < results.data.length; i++) {
              let obj = {}
              obj.number = results.data[i][0]
              obj.name = results.data[i][1]
              obj.nameRemark = results.data[i][2]
              obj.index = results.data[i][3]
              data.push(obj)
            }
            data.splice(0, 1)//将数组第一位的表格名称去除
            let num = 0
            console.log('data', data)
            _this.tableData = data//将数据放入要展示的表格中
          }
        })
      },

4.结果
初始状态：

最终结果：

以上就是vue结合element ui和papaparse实现导入csv文件的方法，如果觉得有用请多多关注点赞，博主会分享自己使用的过程中遇到的难点问题，大家共同进步！

附：.csv文件内容

#,字段名,备注名,索引字段
1,txid,交易流水号,是
2,time,交易时间,是
3,txps,交易人,是
4,good,货物,否