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() {
   }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值