Syncfusion Vuejs Сводная таблица - PullRequest
Новая
       12

Syncfusion Vuejs Сводная таблица

1 голос
/ 10 марта 2020

Я пытаюсь использовать этот пакет таблиц Syncfusion Pivot в моем проекте.
Вот ссылка пакета .

Я просто скопировал код и вставил его в свой vue component.
Код, который я скопировал: 

<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>

Но это не дает результат, как показано в демонстрации:
Ожидаемый результат

Expected result

Результат выдачи:

Result Image

Мои сводные данные в данных. 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"
        }

1 Ответ

0 голосов
/ 16 марта 2020

Упомянутые поля в отчете недоступны в связанном источнике данных. Таким образом, компонент не может быть визуализирован. Поэтому, пожалуйста, используйте доступные поля в источнике данных. Между тем, мы планировали включить вкладку во все образцы UG, чтобы продемонстрировать источник данных, связанный в отчете. Он будет обновлен в конце месяца.

Тем временем мы подготовили образец для ознакомления с образцами данных.

Пример ссылки: https://codesandbox.io/s/vue-template-d9z5o Демонстрационная ссылка онлайн: https://ej2.syncfusion.com/vue/demos/# / материал / сводная таблица / по умолчанию. html

...