Syncfusion Vuejs 数据透视表答案

【问题标题】：Syncfusion Vuejs PivotTable TableSyncfusion Vuejs 数据透视表
【发布时间】：2020-03-10 13:56:11
【问题描述】：

我正在尝试在我的项目中使用这个 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"
        }

【问题讨论】：

控制台记录您的数据透视数据中的内容。是否获得了一些数据和正确的数据结构
更新了检查pivotData的问题
我的意思是你在你的组件中获得了正确的数据。你的组件文件和data.js文件在同一个目录吗？
是的..它正在获取正确的数据
尝试将您的示例数据直接添加到您的组件中。不要从文件中加载它。例如dataSource: [{"aaa":"bbb", "ccc":"ddd"},{"aaa":"eee","ccc":"fff"}],

标签： javascript laravel vue.js syncfusion

【解决方案1】：

报告中提到的字段在绑定的数据源中不可用。因此，无法渲染组件。因此，请使用数据源中的可用字段。同时，我们计划在所有 UG 示例中包含一个选项卡，以展示报表中绑定的数据源。月底会更新。

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

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

【讨论】：