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)

<pivot :data="data" :fields="fields" :row-fields="rowFields" :col-fields="colFields" :reducer="reducer">
  <!-- Optional slots can be used for formatting, see documentation below -->
</pivot>

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 <pivot> tag.

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

字段标题 (Field headers)

<template slot="my-field-header-slot-name" slot-scope="{ value }">{{ value }}</template>

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)

<template slot="value" slot-scope="{ value }">{{ value.toLocaleString }}</template>

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 父组件 子组件数据