vue.js组件数据绑定_Vue.js的增强的数据透视表组件

vue.js组件数据绑定

VUE数据透视表加 (vue-pivot-table-plus)

A customized vue component for pivot table.

数据透视表的定制vue组件。

This project is modified based on vue-pivot-table to adjust its design to our products and add custom features described below.

根据vue-pivot-table修改了此项目，以根据我们的产品调整其设计并添加以下描述的自定义功能。

定制功能 (Customized features)

• Used v-model to bind row / column fields

  使用v-model绑定行/列字段

  • And get these states reactively
    并React性地获得这些状态

• Reset row / column fields

  重置行/列字段

• Download the current pivotted table in CSV / TSV

  下载CSV / TSV中的当前数据透视表

• Sortable rows

  可排序的行

• Design updates

  设计更新

  • Shrinked buttons and table
    缩小的按钮和桌子

安装 (Install)

npm install --save vue-pivot-table-plus (temp)

npm install --save vue-pivot-table-plus (temp)

用法 (Usage)

The component Pivot has an aggregation table (referred to as PivotTable) from data & specific rows/columns.

组件Pivot具有来自数据和特定行/列的聚合表(称为PivotTable )。

Pivot has also a drag & drop user interface to configure rows/columns of a PivotTable.

Pivot还具有拖放用户界面，以配置PivotTable表的行/列。

<!-- App.vue (template) -->
<template>
  <div id="app">
  ...

    <pivot
      :data="data"
      v-model="fields"
      :reducer="reducer"
      :showSettings="defaultShowSettings"
      >
    </pivot>
  ...

</template>

/* App.vue (js)*/
// Import the needed component(s)
import Vue from 'vue'
import { Pivot } from 'vue-pivot-table-plus'

export default Vue.extend({
  name: "app",
  components: { Pivot },
  data: () => {
    return {
      data: