Dc-vue-excel NPM

vue_test

使用方法

main.js中

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

vue文件中

<template>
  <div>
    <export-excel :list="exportList" :tHeader="tHeader" filename="我导出的xecel" sheetName="sheet1"></export-excel>
        <upload-excel :on-success="success"></upload-excel>
    <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>

  </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: {
    exportList() {
      return this.formatJson(this.tName, this.tableData)
    },
  },
  watch: {},
  methods: {
    // 该方法负责将数组转化成二维数组
    formatJson(headers, rows) {
      // 首先遍历数组
      // [{ username: '张三'},{},{}]  => [[’张三'],[],[]]
      return rows.map(item => {
        return Object.keys(headers).map(key => {
          return item[headers[key]]
        })
      })
    },
    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() {
    // console.log(this.formatJson(this.tName, this.tableData))
  },
}
</script>

<style scoped></style>