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)

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)

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