java 数据透视表 组件_vue 父组件 子组件数据_数据透视表的Vue组件

vue 父组件 子组件数据

数据透视表 (vue-pivot-table)

A vue component for pivot table.

数据透视表的Vue组件。

安装 (Install)

TODO: publish on npm & add npm i --save command

待办事项：在npm上发布并添加npm i --save命令

用法 (Usage)

Java脚本 (Javascript)

// Import the component

import Pivot from '@marketconnect/vue-pivot-table' // Not published yet!

export default {

// Register the component

components: { Pivot },

// Basic data for component props

data: () => {

return {

data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]),

fields: [],

colFields: [{

getter: item => item.x,

label: 'X'

}],

rowFields: [{

getter: item => item.y,

label: 'Y'

}, {

getter: item => item.z,

label: 'Z'

}],

reducer: function(sum, item) {

return sum + 1

}

}

}

...

}

HTML (HTML)

API (API)

道具 (Props)

Prop

Type

Default

Description

data

Array

[]

Dataset to use in the pivot ; each element should be an object

fields

Array

[]

Fields to display in the "Available fields" zone

row-fields

Array

[]

Fields to use as rows by default

col-fields

Array

[]

Fields to use as columns by default

reducer

function

(sum, item) => sum + 1

Function applied to reduce data in the pivot table

available-fields-label-text

String

'Available fields'

Text for available fields drag area zone

cols-label-text

String

'Columns'

Text for the columns drag area zone

rows-label-text

String

'Rows'

Text for the rows drag area zone

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

Array

[]

在“可用字段”区域中显示的字段

row-fields

Array

[]

默认情况下用作行的字段

col-fields

Array

[]

默认情况下用作列的字段

reducer

function

(sum, item) => sum + 1

应用于减少data透视表中data功能

available-fields-label-text

String

'Available fields'

可用字段的文本拖动区域区域

cols-label-text

String

'Columns'

列拖动区域区域的文本

rows-label-text

String

'Rows'

行拖动区域区域的文本

hide-settings-text

String

'Hide settings'

“隐藏设置”按钮的文字

show-settings-text

String

'Show settings'

“显示设置”按钮的文字

栏位格式 (Field format)

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

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

label (String): text to display in the draggable button

label ( String )：在可拖动按钮中显示的文本

getter (function): Function to apply on an element of data to get the field value

getter ( function )：应用于data元素以获取字段值的函数

sort (function, optional): Function to order fields in the pivot table header ; if no value is provided, javascript-natural-sort will be applied

sort ( function ，可选)：用于对数据透视表标题中的字段进行sort function ； 如果未提供任何值，则将应用javascript-natural-sort

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

headerSlotName ( String ，可选)：用于格式化数据透视表中的标题的插槽的名称； 如果未提供插槽名称，则该值将显示为数据中找到的值

插槽 (Slots)

All the pivot table data display can be formatted with slots, configured in the tag.

所有数据透视表数据显示都可以使用在标记中配置的插槽进行格式化。

字段标题 (Field headers)

{{ value }}

The slot attribute must match the slotName previously set on your field prop.

slot属性必须与先前在字段道具上设置的slotName相匹配。

The slot-scope should not be changed in order to access the value in the template.

不应更改slot-scope以便访问模板中的value 。

价值观 (Values)

{{ value.toLocaleString }}

The slot attribute must be set to value.

slot属性必须设置为value 。

The slot-scope should not be changed in order to access the value in the template.

不应更改slot-scope以便访问模板中的value 。

大型数据集 (Large datasets)

If you plan on using this component with large datasets, we strongly advise you to use Object.freeze on your data object.

如果计划将此组件与大型数据集一起使用，我们强烈建议您在data对象上使用Object.freeze 。

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 dev

# Build js libraries in dist folder

npm run build

翻译自: https://vuejsexamples.com/a-vue-component-for-pivot-table/

vue 父组件 子组件数据