Syncfusion Vuejs PivotTable表

Question

我正尝试在我的项目中使用此Syncfusion Pivot表包。

Here is the link of package。

我只是复制代码并将其粘贴到我的vue组件中。

我复制的代码：

<template>
  <div id="app">
    <ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height"></ejs-pivotview>
  </div>
</template>

<script>
  import Vue from "vue";
  import { PivotViewPlugin } from "@syncfusion/ej2-vue-pivotview";
  import { pivotData } from "./data.js";

  Vue.use(PivotViewPlugin);

  export default {
    data() {
      return {
        dataSourceSettings: {
          dataSource: pivotData,
          expandAll: false,
          columns: [
            { name: "Year", caption: "Production Year" },
            { name: "Quarter" }
          ],
          values: [
            { name: "Sold", caption: "Units Sold" },
            { name: "Amount", caption: "Sold Amount" }
          ],
          rows: [{ name: "Country" }, { name: "Products" }],
          filters: []
        },
        height: 350
      };
    }
  };
</script>

<style>
  @import "../../../../../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-lists/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-grids/styles/material.css";
  @import "../../../../../node_modules/@syncfusion/ej2-pivotview/styles/material.css";
</style>

但它没有给出演示中看到的结果：

预期结果

​

​

给出结果：

​

​

我在data.js中的数据透视。以下是示例数据：

 {
            "balance": 2430.87,
            "quantity": 11,
            "name": "Skinner Ward",
            "gender": "male",
            "company": "GROK",
            "state": "New Jercy"
        },
        {
            "balance": 3192.7,
            "quantity": 15,
            "name": "Gwen Dixon",
            "gender": "female",
            "company": "ICOLOGY",
            "state": "Vetaikan"
        },
        {
            "balance": 1663.84,
            "quantity": 14,
            "name": "Deena Gillespie",
            "gender": "female",
            "company": "OVERPLEX",
            "state": "New Jercy"
        }

Answer 1

报告中提到的字段在绑定的数据源中不可用。因此，该组件无法呈现。因此，请使用数据源中的可用字段。同时，我们计划在所有UG示例中包含一个选项卡，以显示报告中绑定的数据源。它将在月底刷新。

同时，我们准备了一个样本，供您参考样本数据。

示例链接：https://codesandbox.io/s/vue-template-d9z5o在线演示链接：https://ej2.syncfusion.com/vue/demos/#/material/pivot-table/default.html