Vue.js 类星体框架 - "vue-excel-editor" 集成

Question

需要在我的 quasar 应用程序中使用 excel 作为输入表单的一部分。目标是解决此问题，或提出已证明有效的替代集成。

我做了什么：

安装“vue-excel-editor”包，来自运行:

npm install vue-excel-editor

将以下代码添加到 quasar.conf.js:

boot: [
  '...',
  '...',
  'vue-excel-editor'
],

添加以下代码创建 /boot/vue-excel-editor.js

import { boot } from 'quasar/wrappers'
import VueExcelEditor from 'vue-excel-editor'

export default boot(({ app }) => {
  // Set VueExcelEditor instance on app
  app.use(VueExcelEditor)
})

export { VueExcelEditor }

访问来自 vue-excel-editor 文档的信息请看这里：https://www.npmjs.com/package/vue-excel-editor

创建了一个仅用于检查的基本组件：

<template>
  <vue-excel-editor v-model="jsondata" filter-row>
    <vue-excel-column field="user" label="User ID" type="string" width="80px" />
    <vue-excel-column field="name" label="Name" type="string" width="150px" />
    <vue-excel-column
      field="phone"
      label="Contact"
      type="string"
      width="130px"
    />
    <vue-excel-column
      field="gender"
      label="Gender"
      type="select"
      width="50px"
      :options="['F', 'M', 'U']"
    />
    <vue-excel-column field="age" label="Age" type="number" width="70px" />
    <vue-excel-column
      field="birth"
      label="Date Of Birth"
      type="date"
      width="80px"
    />
  </vue-excel-editor>
</template>
<script>

export default {
  name: "Spreadsheet",
};
</script>

将此组件添加到之前工作的页面后，我得到了这个控制台：

 App •  ERROR  •  UI  in ./node_modules/vue-excel-editor/src/VueExcelEditor.vue?vue&type=template&id=cf2e49d2&scoped=true

Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: <template v-for> key should be placed on the <template> tag.
at C:\Users\..\..\..\Code\..\frontend\node_modules\vue-excel-editor\src\VueExcelEditor.vue:124:21
122|                      }"
123|                      :style="Object.assign(cellStyle(record, item), renderColumnCellStyle(item))"
124|                      :key="p"
   |                      ^^^^^^^^
125|                      @mouseover="cellMouseOver"
126|                      @mousemove="cellMouseMove">{{ item.toText(record[item.name]) }}</td>

 App •  ERROR  •  UI  in ./node_modules/vue-excel-editor/src/VueExcelEditor.vue?vue&type=template&id=cf2e49d2&scoped=true

Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):

VueCompilerError: <template v-for> key should be placed on the <template> tag.
at C:\..\..\..\..\Code\..\frontend\node_modules\vue-excel-editor\src\VueExcelEditor.vue:144:21
142|                      }"
143|                      :style="renderColumnCellStyle(field)"
144|                      :key="`f${p}`">{{ summary[field.name] }}</td>
   |                      ^^^^^^^^^^^^^^
145|                </template>
146|              </tr>

 App •  COMPILATION FAILED  • Please check the log above for details.

Answer 1

您使用的是 Vue 3.0 吗？现在 vue-excel-editor 组件仅适用于 Vue 2.0.

https://v3.vuejs.org/guide/migration/key-attribute.html#with-template-v-for

Vue.js 类星体框架 - "vue-excel-editor" 集成

Vue.js quasar-framework - "vue-excel-editor" integration

excel

vue.js

quasar-framework