业务需求要求:选择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() {
}