导入excel表格,数据打印出来了,但是会报undefined
报错:~~~~
子组件:impotEvent
方法导入excel
<div class="table-box">
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="impotEvent">选择文件</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
border
resizable
show-overflow
keep-source
ref="xTable"
width="100%"
height="auto"
max-height="600"
class="xTable"
:loading="loading"
:data="dataSource"
>
<vxe-table-column
v-for="(item, i) in tableColumn"
:key="i"
:type="item.type"
:title="item.title"
:field="item.field"
:fixed="item.fixed"
:width="item.width"
:min-width="item.mWidth"
></vxe-table-column>
</vxe-table>
</div>
<script>
import XLSX from "xlsx";
export default {
props: ["tableColumn"],
data() {
return {
loading: false, // table蒙层
dataSource: [],
};
},
methods: {
impotEvent() {
this.$refs.xTable
.readFile({
types: ["xls", "xlsx"]
})
.then(params => {
// console.log(params);
const { files } = params;
const fileReader = new FileReader();
fileReader.onload = ev => {
const data = ev.target.result;
const workbook = XLSX.read(data, { type: "binary" });
const csvData = XLSX.utils.sheet_to_csv(workbook.Sheets.Sheet1);
const tableData = [];
// 解析数据
csvData.split("\n").forEach(vRow => {
if (vRow) {
const vCols = vRow.split(",");
const item = {};
vCols.forEach((val, cIndex) => {
const column = this.tableColumn[cIndex];
console.log(column.field) // 打印出来了,但是 .field 一直会报错
if(column.field != undefined) {
item[column.field] = val;
// console.log(item)
}
});
tableData.push(item);
}
});
console.log(tableData)
this.dataSource = tableData;
};
fileReader.readAsBinaryString(files[0]);
});
}
}
};
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论