Dc-vue-excel-upload NPM

vue_test

使用方法

main.js中

import excelUpload from 'dc-vue-excel-upload'
import 'dc-vue-excel-upload/lib/dc-vue-excel-upload.css'
Vue.use(excelUpload)

vue文件中

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <upload-excel :on-success="success"></upload-excel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      tHeader: ['日期', '姓名', '地址'],
      tName: ['date', 'name', 'address'],
    }
  },
  computed: {
  },
  watch: {},
  methods: {
   success({ header, results }) {
        const userRelations = {
          日期: 'date',
          姓名: 'name',
          地址: 'address',
        }
        const arr = []
        // 遍历所有的数组
        results.forEach(item => {
          // 需要将每一个条数据里面的中文都换成英文
          const userInfo = {}
          Object.keys(item).forEach(key => {
            userInfo[userRelations[key]] = item[key]
          })
          // 最终userInfo变成了全是英文
          arr.push(userInfo)
        })
        this.$message.success('导入成功')
        this.tableData=this.tableData.concat(arr)
        // this.$forceUpdate();

    },
  },
  created() {},
  mounted() {
  },
}
</script>

<style scoped></style>