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: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]),fields: {availableFields: [],rowFields: [{getter: item => item.x,label: 'X-axis'}, {getter: item => item.y,label: 'Y-axis',}],colFields: [{getter: item => item.z,label: 'Z-axis'}],},reducer: (sum, item) => sum + 1,defaultShowSettings: true,tableHeight: '400px'}}...
})

/* main.js */
import Vue from "vue"
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import BootstrapVue from 'bootstrap-vue'
import App from './App.vue'Vue.use(BootstrapVue)new Vue({render: h => h(App)
}).$mount("#app")

API (API)

道具 (Props)

栏位格式 (Field format)

Each element in the arrays fields, colFields or rowFields should be an Object with this format:

数组fields ， colFields或rowFields中的每个元素应为具有以下格式的Object：

大型数据集 (Large datasets)

If this component is used with large datasets, consider applying Object.freeze on your data object to avoid useless change tracking on each data element.

如果此组件用于大型数据集，请考虑将Object.freeze应用于data对象，以避免对每个数据元素进行无用的更改跟踪。

See https://vuejs.org/v2/guide/instance.html#Data-and-Methods.

请参阅https://vuejs.org/v2/guide/instance.html#Data-and-Methods 。

建立 (Build)

# Install dependencies
npm install# Serve with hot reload at localhost:8080
npm run serve# Build js libraries in dist folder
npm run build:lib

未来功能 (Future features)

• Change the sort order of row / column items

  更改行/列项目的排序顺序

• Select enable / disable of each features (reset buttons, download button, and etc.)

  选择每个功能的启用/禁用(重置按钮，下载按钮等)

• Demo application

  演示应用

• More sophiscated design updates

  更多复杂的设计更新

框架/插件 (Framework/Plugin)

• CSS

  CSS

  • Bootstrap ^4.2.1引导程序^ 4.2.1

• JavaScript

  JavaScript

  • Vue ^2.6.10Vue ^ 2.6.10
  • jQuery ^3.3.1jQuery ^ 3.3.1
  • 2.0.0-rc.132.0.0-rc.13
  • VueDraggable ^2.21.0VueDraggable ^ 2.21.0

翻译自: https://vuejsexamples.com/an-enhanced-pivot-table-component-for-vue-js/

vue.js组件数据绑定