vue项目xlsx导入

vue项目xlsx导入并且将数据导入element-ui的表格中

npm i xlsx 安装

<el-upload
   action=""
   :multiple="false"
   :show-file-list="false"
   :on-change="updatedFile"
   :auto-upload="false"
 >
  <el-button>导入</el-button>
</el-upload>
<div v-if="loading">
  <el-table
    :data="xlsxTable"
    border
    style="width: 100%"
  >
    <el-table-column prop="index" label="序号" width="150">
      <template slot-scope="scope">
        <div>{{ scope.$index + 1 }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名字"></el-table-column>
    <el-table-column prop="sex" label="性别"></el-table-column>
    <el-table-column prop="styChild" label="身份"></el-table-column>
    <el-table-column prop="gradeClass" label="学历"></el-table-column>
  </el-table>
</div>

import xlsl from "xlsx";
methods:{
  updatedFile(file) {
     console.log(file);
     let that = this;
     let accept = ["xlsx", "xls"];
     let files = file.raw.name.substr(file.raw.name.lastIndexOf(".") + 1);
     let index = accept.indexOf(files);
     if (index === -1) return;
     const reader = new FileReader();
     reader.onload = async function (e) {
     // 解析数据
       let context = await xlsl.read(e.target.result, { type: "binary" });
       //XLSX.utils.sheet_to_json()解析excel，给空的单元格赋值为空字符串
       let excel = await xlsl.utils.sheet_to_json(
         context.Sheets[context.SheetNames[0]]
       );
       that.xlsxTable= excel;
       that.loading = true;
     };
   },
}