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 (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组件数据绑定