导入excel表格,数据打印出来了,但是会报undefined

发布于 2022-09-12 13:59:42 字数 2424 浏览 13 评论 0

报错:~~~~
image.png
子组件:
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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文