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

Prop	Type	Default	Description
data	Array	[]	Dataset to use in the pivot ; each element should be an object
fields	Object (v-model)	[]	Information about pivot table. It includes available fields, row fields, column fields. You can receive the change of these information by watching this fields. Please consult the above example for usage.
reducer	function	(sum, item) => sum + 1	Function applied to reduce data in the pivot table
tableHeight	Number	500px	The height of table
default-show-settings	Boolean	true	Show settings at component creation
no-data-warning-text	String	'No data to display.'	Text to display when data is empty
is-data-loading	Boolean	false	Display a loading content instead of the table when the value is true (see slots for customization)
available-fields-label-text	String	'Available fields'	Text for available fields drag area
rows-label-text	String	'Rows'	Text for the rows drag area
cols-label-text	String	'Columns'	Text for the columns drag area
hide-settings-text	String	'Hide settings'	Text for the "hide settings" button
show-settings-text	String	'Show settings'	Text for the "show settings" button

Struts	類型	預設	描述
data	Array	[]	用于資料透視的資料集; 每個元素應該是一個對象
fields	Object (v-model)	[]	有關資料透視表的資訊。 它包括可用字段，行字段，列字段。 您可以通過檢視此字段來接收這些資訊的更改。 請參考上面的示例以了解用法。
reducer	function	(sum, item) => sum + 1	應用于減少 data 透視表中 data 功能
tableHeight	Number	500px	桌子的高度
default-show-settings	Boolean	true	在建立元件時顯示設定
no-data-warning-text	String	'No data to display.'	data 為空時顯示的文本
is-data-loading	Boolean	false	值為 true 時，顯示加載内容而不是表格(請參閱插槽以進行自定義)
available-fields-label-text	String	'Available fields'	可用字段的文本拖動區域
rows-label-text	String	'Rows'	行拖動區域的文本
cols-label-text	String	'Columns'	列拖動區域的文本
hide-settings-text	String	'Hide settings'	“隐藏設定”按鈕的文字
show-settings-text	String	'Show settings'	“顯示設定”按鈕的文字

欄位格式 (Field format)

Each element in the arrays

fields

,

colFields

or

rowFields

should be an Object with this format:

數組

fields

，

colFields

或

rowFields

中的每個元素應為具有以下格式的Object：

Prop	Type	Description
label	String	Text to display in the draggable button ( Pivot only)
getter	Function	Function to apply on an element of data to get the field value
sort	Function	Optional - Function to order fields in the pivot table header ; if no value is provided, javascript-natural-sort will be applied
showHeader	Boolean	Optional (default: true ) - Whether the header should be displayed in the pivot table
showFooter	Boolean	Optional (default: false ) - Whether the footer should be displayed in the pivot table
headerSlotName	String	Optional - Name of the slot to use to format the header in the pivot table ; if no slot name is provided, the value will be displayed as found in data
footerSlotName	String	Optional - Same as above for the footer

Struts	類型	描述
label	String	在可拖動按鈕中顯示的文本(僅用于 Pivot )
getter	Function	應用于 data 元素以擷取字段值的函數
sort	Function	可選-用于對資料透視表标題中的字段進行排序的功能； 如果未提供任何值，則将應用javascript-natural-sort
showHeader	Boolean	可選(預設： true )-是否應在資料透視表中顯示标題
showFooter	Boolean	可選(預設： false )-是否在資料透視表中顯示頁腳
headerSlotName	String	可選-用于格式化資料透視表中标題的插槽名稱； 如果未提供插槽名稱，則該值将顯示為資料中找到的值
footerSlotName	String	可選-與上述頁腳相同

大型資料集 (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.10

    Vue ^ 2.6.10

  • jQuery ^3.3.1

    jQuery ^ 3.3.1

  • 2.0.0-rc.132.0.0-rc.13

  • VueDraggable ^2.21.0

    VueDraggable ^ 2.21.0

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

vue.js元件資料綁定