vue+elementUI使用node-xlsx实现选择excel并解析其数据，导入显示在table组件中。

业务需求要求：选择excel文件，去解析和导入数据到表格组件里面。

解决思路：使用elementUI组件，很容易实现选择文件的对话框。使用node-xlsx很容易实现excel数据转成数组。到此为止距离在table中显示还差数据的处理。
在table组件中显示需要对象数组，即文档示例中的

 tableData: [{
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]

而我们实际获取到的：

		 [
		 	[[日期],[姓名],[地址]],
		 	[[447336],['王小虎'],['上海市普陀区金沙江路 1516 弄']]
         ]

Table表格组件根据对象名字段（prop）显示，且为了以后可能使用该数据进行其他业务操作。在把数组转对象过程中，需要将各数据对应的属性名写成键值。实际操作中的属性往往比较大，为了减少循环，先把字段名写成数组。

<script>
// 引入 node-xlsx 模块 npm install node-xlsx --save
import xlsx from "node-xlsx";
export default {
  data: () => {
    return {
      currentPageHeight: document.documentElement.clientHeight,
      multipleSelection: [],
      currentfilename: "",
      sheetList: [],
      columnnprop: [
        "date",
        "name",
        "address"
      ],
      columnname: [
        "日期",
        "姓名",
        "地址"
      ],
    };
  },
  components: {},
  mounted() {},
  methods: {
    timeToString(time) {
      var str = "";
      const timeobj = new Date(time);
      var year = timeobj.getFullYear();
      var month = timeobj.getMonth() + 1;
      var date = timeobj.getDate();
      str = year + "-" + month + "-" + date;

      return str;
    },
    submitfile(event, file, fileList) {
      console.log(file);
      if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        this.$message({
          message: "上传格式不正确，请上传xls或者xlsx格式",
          type: "warning",
        });
        return false;
      }
      //提示当前导入文件名称
      this.currentfilename = file.name;
      const sheets = xlsx.parse(file.raw.path);
      //看该文件有几个表
      console.log(sheets.length);
      // 打印页面信息..
      const sheet = sheets[0];
      // 打印页面数据
      // console.log(sheet.data);
      sheet.data.forEach((row, index) => {
        const obj = {};
        //将解析的数组转成对象数组
        if (index != 0) {
          for (let i = 0; i < row.length; i++) {
            if (i == 0) {
            //日期为距离1900年的天数，所以需要处理成日期格式
              const date = new Date(1900, 0, row[i] - 1).toDateString();
              obj[this.columnnprop[i]] = this.timeToString(date);
            } else {
              //如index=1时，obj[name]='王小虎'
              obj[this.columnnprop[i]] = row[i];
            }
          }
          this.sheetList.push(obj);
        }
      });
      console.log(this.sheetList);
    },
  },
};
</script>

HTML：

<template>
  <div class="app-container">
    <el-upload
      class="upload-demo"
      :limit="1"
      action=""
      :on-progress="submitfile"
    >
      <el-button id="openBtn" type="primary"
        >导入文件<i class="el-icon-upload el-icon--right"></i
      ></el-button>
      <div v-show="currentfilename !== ''" class="uploadFile_tip">
        当前导入的文件名：<b>{{ currentfilename }}</b>
      </div>
    </el-upload>
    <el-table
      :data="sheetList"
      :height="currentPageHeight - '155'"
      border
      tooltip-effect
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ><el-table-column type="selection" width="30" />
      <el-table-column
        sortable
        :prop="columnnprop[0]"
        :label="columnname[0]"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :prop="columnnprop[1]"
        :label="columnname[1]"
        width="120"
      >
      <el-table-column
        :prop="columnnprop[2]"
        :label="columnname[2]"
        width="120"
      >
    </el-table>
  </div>
</template>