taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add link for individual props/events/slots/configs/icons

Browse Source
This commit is contained in:
Justineo
2021-10-20 01:11:27 +08:00
parent df2b6892d2
commit b0dcdbb873
162 changed files with 2176 additions and 2073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
one/docs/en-US/components/table.md
View File

@@ -8,7 +8,7 @@
### Content density
Available density variants for the `ui` prop: `compact`/`loose`.
Available density variants for the [`ui`](#props-ui) prop: `compact` / `loose`.
[[ demo src="/demo/table/basic.vue" ]]
@@ -20,7 +20,7 @@ Supports specifying row keys, mode of selection, and sorting by values of specif
### Filter
Use the `filter` slot to enable custom column filter dropdown.
Use the [`filter`](.column#slots-filter) slot of the `Column` component to enable custom column filter dropdown.
[[ demo src="/demo/table/filter.vue" ]]
@@ -32,7 +32,7 @@ Allow table content to be scrollable inside the table body, i.e. the effect of f
### Fixed columns
Use the `scroll` of `Table` and the `fixed` prop of `Column` to enable fixed columns.
Use the `scroll` of `Table` and the [`fixed`](./column#props-fixed) prop of `Column` to enable fixed columns.
[[ demo src="/demo/table/fixed.vue" ]]
@@ -42,24 +42,30 @@ Rows can be expanded into sub-rows.
[[ demo src="/demo/table/expandable.vue" ]]
### Header descriptions
Use the [`desc`](./column#props-desc) prop or the [`desc`](./column#slots-desc) slot to provide description for the column header.
[[ demo src="/demo/table/desc.vue" ]]
## API
### Props
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `ui` | `string=` | - | [^ui] |
| `data` | `Array<Object>` | - | Table data in rows. |
| `key-field` | `string` | - | Denotes the unique key of the table data. The value should be a key defined in the data object of each row. The corresponding field will be regarded as the [`key` attribute](https://vuejs.org/v2/guide/list.html#key) for each row element. When `selectable` is `true`, it also indicates the rows of which column should be selected from (and in this occasion the value should be defined as the `field` prop for one of the children `Column` components). |
| `selectable` | `boolean` | `false` | Whether the rows are selectable. |
| `select-mode` | `string` | `'multiple'` | The mode of row selection. Available values are `single`/`multiple`, which denote single selection and multiple selection respectively. |
| `selected` | `Array<*>|*` | `[]` | [^selected] |
| `expandable` | `boolean` | `false` | Whether the rows can be expanded into sub-rows. |
| `expanded` | `Array<*>` | `[]` | [^expanded] |
| `order` | `string|boolean` | `false` | The order for sorting the specified column. `false` denotes no specific order, while string values of `'asc'`/`'desc'` denote ascending/descending order respectively. |
| `order-by` | `string` | - | The column which is currently sorted by. The value should be defined as the `field` prop for one of the children `Column` components. |
| `scroll` | `number` | - | The maximun height of the scrollable area inside the table body. When table content exceeds the specified height, internal scroll will be enabled and the head/foot will become fixed. |
| `loading` | `boolean` | `false` | Whether table data is being loaded. |
| ``ui`` | `string=` | - | [^ui] |
| ``data`` | `Array<Object>` | - | Table data in rows. |
| ``key-field`` | `string` | - | Denotes the unique key of the table data. The value should be a key defined in the data object of each row. The corresponding field will be regarded as the [`key` attribute](https://vuejs.org/v2/guide/list.html#key) for each row element. When `selectable` is `true`, it also indicates the rows of which column should be selected from (and in this occasion the value should be defined as the [`field`](./column#props-field) prop for one of the children `Column` components). |
| ``selectable`` | `boolean` | `false` | Whether the rows are selectable. |
| ``select-mode`` | `string` | `'multiple'` | The mode of row selection. Available values are `single` / `multiple`, which denote single selection and multiple selection respectively. |
| ``selected`` | `Array<*>|*` | `[]` | [^selected] |
| ``expandable`` | `boolean` | `false` | Whether the rows can be expanded into sub-rows. |
| ``expanded`` | `Array<*>` | `[]` | [^expanded] |
| ``order`` | `string | boolean` | `false` | The order for sorting the specified column. `false` denotes no specific order, while string values of `'asc'` / `'desc'` denote ascending/descending order respectively. |
| ``order-by`` | `string` | - | The column which is currently sorted by. The value should be defined as the [`field`](./column#props-field) prop for one of the children `Column` components. |
| ``scroll`` | `number` | - | The maximun height of the scrollable area inside the table body. When table content exceeds the specified height, internal scroll will be enabled and the head/foot will become fixed. |
| ``loading`` | `boolean` | `false` | Whether table data is being loaded. |
^^^ui
Style variants.
@@ -79,7 +85,7 @@ Style variants.
`.sync`
:::
The value(s) of selected rows. When `select-mode` is `'multiple'`, the value is an array of values keyed by the `key-field` prop from the row data . When `select-mode` is `'single'`, the value is such key value of the selected row.
The value(s) of selected rows. When [`select-mode`](#props-select-mode) is `'multiple'`, the value is an array of values keyed by the [`key-field` p](#props-key-field)rop from the row data . When [`select-mode`](#props-select-mode) is `'single'`, the value is such key value of the selected row.
^^^
^^^expanded
@@ -87,30 +93,30 @@ The value(s) of selected rows. When `select-mode` is `'multiple'`, the value is
`.sync`
:::
The values of expanded rows. Each item is the value keyed by the `key-field` prop from the row data.
The values of expanded rows. Each item is the value keyed by the [`key-field`](#props-key-field) prop from the row data.
^^^
### Slots
| Name | Description |
| -- | -- |
| `default` | The columns of the table. Can only have `Column` components as children. |
| `no-data` | The content to be displayed when there's no data to show. |
| `foot` | The content of the table foot. Will span across all columns when defined. |
| `sub-row` | [^slot-sub-row] |
| ``default`` | The columns of the table. Can only have `Column` components as children. |
| ``no-data`` | The content to be displayed when there's no data to show. |
| ``foot`` | The content of the table foot. Will span across all columns when defined. |
| ``sub-row`` | [^slot-sub-row] |
^^^slot-sub-row
The content of the expanded sub-row. Will span across all columns and override the `sub-row` slot of the `Column` components inside the table.
The content of the expanded sub-row. Will span across all columns and override the [`sub-row`](./column#slots-sub-row) slot of the `Column` components inside the table.
The slot scope properties are the same as each item inside `datasource`, with an extra `index: number`, which denotes the index within the datasource.
The slot scope properties are the same as each item inside [`data`](#props-data), with an extra `index: number`, which denotes the index within the datasource.
^^^
### Events
| Name | Description |
| -- | -- |
| `select` | [^event-select] |
| `sort` | [^event-sort] |
| ``select`` | [^event-select] |
| ``sort`` | [^event-sort] |
^^^event-select
Triggered when the selected item(s) are changed. The callback parameter list is `(selected, item, selectedItems)`.
@@ -119,8 +125,8 @@ Triggered when the selected item(s) are changed. The callback parameter list is
| Name | Type | Description |
| -- | -- | -- |
| `selected` | `boolean` | Whether the item is selected after change. |
| `item` | `Object` | The item in the `data` prop that is being selected/unselected. When it involves row span for the `key-field` mapped column, the data of the first related row is returned. |
| `selectedItems` | `Object<string, Object|Array>` | All selected items as an object. The key is `key-field` mapped value for the selected row and the value is the row data. When it involves row span for the `key-field` mapped column, returns an array of row data of all related rows. |
| `item` | `Object` | The item in the [`data`](#props-data) prop that is being selected/unselected. When it involves row span for the `key-field` mapped column, the data of the first related row is returned. |
| `selectedItems` | `Object<string, Object | Array>` | All selected items as an object. The key is [`key-field`](#props-key-field) mapped value for the selected row and the value is the row data. When it involves row span for the `key-field` mapped column, returns an array of row data of all related rows. |
+++
^^^
@@ -130,7 +136,7 @@ Triggered when users sort a specific column. The callback parameter list is `(fi
+++Parameters
| Name | Type | Description |
| -- | -- | -- |
| `field` | `string` | Which column to be sort by. The value should be defined as the `field` prop for one of the children `Column` components. |
| `order` | `string|boolean` | Same as the [`order` prop](#props). |
| `field` | `string` | Which column to be sort by. The value should be defined as the [`field`](./column#props-field) prop for one of the children `Column` components. |
| `order` | `string | boolean` | Same as the [`order`](#props-order) prop. |
+++
^^^