<template> <vue-pivottable-ui class="app-vue-pivottable" :data="datas" :aggregatorName="aggregatorName" :rendererName="rendererName" :columns="columns" :rows="rows" :cols="cols" :vals="vals" :locales="locales" :rowTotal="rowTotal" :colTotal="colTotal" :onChange="onChange" :hiddenFromDragDrop="hiddenFromDragDrop" > </vue-pivottable-ui> </template> <script lang = 'ts'> import { Vue, Component, Prop } from 'vue-property-decorator'; import { VuePivottableUi } from 'ibiz-vue-pivottable'; import 'ibiz-vue-pivottable/dist/vue-pivottable.css'; @Component({ components: { VuePivottableUi } }) export default class AppVuePivotTable extends Vue { /** * 数据集 * * @type {*} * @memberof AppVuePivotTable */ @Prop() datas: any; /** * 列集合 * * @type {*} * @memberof AppVuePivotTable */ @Prop() allColumns: any; /** * 聚合模式 * * @type {string} * @memberof AppVuePivotTable */ protected aggregatorName: string = 'Sum'; /** * 渲染模式 * * @type {string} * @memberof AppVuePivotTable */ protected rendererName: string = 'Table Heatmap'; /** * 行统计 * * @type {boolean} * @memberof AppVuePivotTable */ protected rowTotal: boolean = true; /** * 列统计 * * @type {boolean} * @memberof AppVuePivotTable */ protected colTotal: boolean = true; /** * 列属性列集合 * * @type {*} * @memberof AppVuePivotTable */ protected cols: any[] = []; /** * 行属性列集合 * * @type {*} * @memberof AppVuePivotTable */ protected rows: any[] = []; /** * 值属性集合 * * @type {*} * @memberof AppVuePivotTable */ protected vals: any[] = []; /** * 隐藏列集合 * * @type {*} * @memberof AppVuePivotTable */ protected hiddenFromDragDrop: any[] = []; /** * 展现列集合 * * @type {*} * @memberof AppVuePivotTable */ protected columns: any[] = []; /** * 语言资源 * * @type {*} * @memberof AppVuePivotTable */ protected locales: any = { aggregators: { 'Count': 'Count', 'Count Unique Values': 'Count Unique Values', 'List Unique Values': 'List Unique Values', 'Sum': 'Sum', 'Integer Sum': 'Integer Sum', 'Average': 'Average', 'Median': 'Median', 'Sample Variance': 'Sample Variance', 'Sample Standard Deviation': 'Sample Standard Deviation', 'Minimum': 'Minimum', 'Maximum': 'Maximum', 'First': 'First', 'Last': 'Last', 'Sum over Sum': 'Sum over Sum', 'Sum as Fraction of Total': 'Sum as Fraction of Total', 'Sum as Fraction of Rows': 'Sum as Fraction of Rows', 'Sum as Fraction of Columns': 'Sum as Fraction of Columns', 'Count as Fraction of Total': 'Count as Fraction of Total', 'Count as Fraction of Rows': 'Count as Fraction of Rows', 'Count as Fraction of Columns': 'Count as Fraction of Columns' }, renderer: { 'Table': 'Table', 'Table Heatmap': 'Table Heatmap', 'Table Col Heatmap': 'Table Col Heatmap', 'Table Row Heatmap': 'Table Row Heatmap', 'Expor Table TSV': 'Expor Table TSV', 'Grouped Column Chart': 'Grouped Column Chart', 'Stacked Column Chart': 'Stacked Column Chart', 'Grouped Bar Chart': 'Grouped Bar Chart', 'Stacked Bar Chart': 'Stacked Bar Chart', 'Line Chart': 'Line Chart', 'Dot Chart': 'Dot Chart', 'Area Chart': 'Area Chart', 'Scatter Chart': 'Scatter Chart', 'Multiple Pie Chart': 'Multiple Pie Chart' }, 'Filter Values': 'Filter Values', 'Select All': 'Select All', 'Deselect All': 'Deselect All', 'Totals': 'Totals' }; /** * 生命周期 * * @type {*} * @memberof AppVuePivotTable */ public created() { if(this.allColumns) { this.allColumns.forEach((item: any) => { if(!item.show) { this.hiddenFromDragDrop.push(item.name); } let col: any = { ...item }; col.prop = col.name; this.columns.push(col); }); } } /** * 事件 * * @type {*} * @memberof AppVuePivotTable */ public onChange(evt: any) { console.log(evt); } } </script> <style lang="less"> .app-vue-pivottable { height: calc(100% - 1px); .pvtTable { min-width: 100%; } } </style>