dc-vue-excel-export

vue_test

使用方法

main.js中

import excelExport from 'dc-vue-excel-export'
Vue.use(excelExport)

vue文件中

<template>
  <div>
    <export-excel :list="exportList" :tHeader="tHeader" filename="我导出的xecel" sheetName="sheet1"></export-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]]
        })
      })
    },
  },
  created() {},
  mounted() {
    // console.log(this.formatJson(this.tName, this.tableData))
  },
}
</script>

<style scoped></style>

注意事项

需安装 "element-ui",

"file-saver",

"xlsx"

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.