vue实现excel文件导入导出操作示例

npm i @d2-projects/vue-table-export
npm i @d2-projects/vue-table-import

import pluginImport from '@d2-projects/vue-table-import'
Vue.use(pluginImport)
import pluginExport from "@d2-projects/vue-table-export";
Vue.use(pluginExport);

<template>
  <div>
    <el-upload :before-upload="handleUpload" action="上传地址">
      <el-button >点击导入execl表格</el-button>
    </el-upload>
  </div>
</template>
<script> 
export default {
  data() {
    return {
      table: {
        columns: [],
        data: [],
      },
    };
  },
  methods: {
    handleUpload(file) {
      this.$import.xlsx(file).then(({ header, results }) => {
       // header, results是返回的参数 打印看下
      });
    }
  },
};
</script>
<style>
</style>

<template>
  <div>
    <el-button @click="exportFile" >
      <el-icon name="download" />导出为 Excel
    </el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      table: {
        columns: [],
        data: []
      }
    }
  },
  methods: {
    exportFile() {
      this.$export.excel({
        columns: this.table.columns,
        data: this.table.data
      }).then(() => {
        this.$message('导出成功')
      })
    }
  }
}
</script>
<style>
</style>