el-tabs + 导入简单的excel文件

最新推荐文章于 2024-03-15 14:41:32 发布

原创

最新推荐文章于 2024-03-15 14:41:32 发布 · 653 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

在vue-element-admin中导入excel的基础上，利用el-tabs + el-table显示所有sheet表格数据。只能显示简单的数据格式，不能显示合并的单元格。先记一下；留着自己之后看。

component组件


<template>
  <div>
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
      导入文件
    </el-button>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function// eslint-disable-line
  },
  data() {
    return {
      loading: false,
      editableTabs: []
    }
  },
  methods: {
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        this.$message.error('Only support uploading one file!')