小编jog*_*cia的帖子

在vue中上传并处理excel文件

我正在尝试上传xlsx excel 文件并在我的 Vue 应用程序中处理它。但它失败了,抛出一个错误。这让我认为我没有正确使用或导入库,因为在节点项目中工作正常。

我正在使用xlsx库。

代码

模板

<template>
  <div id="app">
    <input type="file" @change="onChange" />
  </div>
</template>
Run Code Online (Sandbox Code Playgroud)

脚本

import XLSX from "xlsx"

export default {
  name: "App",
  methods: {
    onChange(event) {
      this.file = event.target.files ? event.target.files[0] : null;
      let workbook = XLSX.readFile(this.file);
      console.log('workbook1');
      console.log(workbook);
      console.log('SheetNames');
      console.log(workbook.SheetNames);
    },
  }
};
Run Code Online (Sandbox Code Playgroud)

在这一点上,即使有一个正确的库(如果有的话),我们也会非常感激。提前致谢。

这是我的问题代码和框:

https://codesandbox.io/s/nervous-montalcini-w3qhy?file=/src/App.vue

javascript excel xlsx vue.js

4
推荐指数
1
解决办法
3万
查看次数

Vuetify 服务器端自动完成

我需要对 Vuetify 自动完成进行无限分页。当我滚动到菜单末尾时,从后端加载新的项目页面。

我尝试v-intersect像这样使用指令:

<template>
  <v-autocomplete 
    :items="aBunchOfItems" 
    item-text="theText" 
    item-value="theValue" 
    label="AutoComplete Test"
  >
    <template v-slot:append-item>
      <div v-intersect="onIntersect">
        Loading more items ...
      </div>
    </template>
  </v-autocomplete>
</template>

<script>
  export default {
    methods: {
      onIntersect () {
        console.log('lol')
      },
    },
  }
</script>
Run Code Online (Sandbox Code Playgroud)

但是,onIntersect()当我单击自动完成功能时,而不是滚动到附加项目时,就会调用该函数。我还尝试了v-lazy将附加项目 div 包装在其中的指令,但这也不起作用。有什么方法可以做到这一点吗?

javascript vue.js vue-component vuetify.js

3
推荐指数
1
解决办法
2060
查看次数

标签 统计

javascript ×2

vue.js ×2

excel ×1

vue-component ×1

vuetify.js ×1

xlsx ×1