mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs: date-picker & tree tweaks (#21885)
This commit is contained in:
Noblet Ouways
@@ -58,25 +58,25 @@ Note, date time locale (month name, first day of the week ...) are also configur
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [string, string]` | '' |
|
||||
| border | whether the date picker is bordered | ^[boolean] | true |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| type | type of the picker | ^[enum]`'year' \| 'years' \|'month' \| 'months' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange' \| 'yearrange'` | date |
|
||||
| default-value | optional, default date of the calendar | ^[object]`Date \| [Date, Date]` | — |
|
||||
| default-time | optional, the time value to use when selecting date range | ^[object]`Date \| [Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] | — |
|
||||
| date-format | optional, format of the date displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | YYYY-MM-DD |
|
||||
| time-format | optional, format of the time displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | HH:mm:ss |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | ^[Function]`(data: Date) => boolean` | — |
|
||||
| shortcuts | an object array to set shortcut options | ^[object]`Array<{ text: string, value: Date \| Function }>` | [] |
|
||||
| cell-class-name | set custom className | ^[Function]`(data: Date) => string` | — |
|
||||
| show-footer | whether to show footer | ^[boolean] | false |
|
||||
| show-confirm | whether to show the confirm button | ^[boolean] | false |
|
||||
| show-week-number | show the week number besides the week | ^[boolean] | false |
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [string, string]` | '' |
|
||||
| border | whether the date picker is bordered | ^[boolean] | true |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| type | type of the picker | ^[enum]`'year' \| 'years' \|'month' \| 'months' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange' \| 'yearrange'` | date |
|
||||
| default-value | optional, default date of the calendar | ^[object]`Date \| [Date, Date]` | — |
|
||||
| default-time | optional, the time value to use when selecting date range | ^[object]`Date \| [Date, Date]` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | ^[string] | — |
|
||||
| date-format | optional, format of the date displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | YYYY-MM-DD |
|
||||
| time-format | optional, format of the time displayed in input's inner panel | ^[string] see [date formats](https://day.js.org/docs/en/display/format) | HH:mm:ss |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | ^[Function]`(data: Date) => boolean` | — |
|
||||
| shortcuts | an object array to set shortcut options | ^[object]`Array<{ text: string, value: Date \| Function }>` | [] |
|
||||
| cell-class-name | set custom className | ^[Function]`(data: Date) => string` | — |
|
||||
| show-footer | whether to show footer where the date picker is one ^[enum]`'dates' \| 'months' \| 'years' \| 'datetime' \| 'datetimerange'` | ^[boolean] | false |
|
||||
| show-confirm | whether to show the confirm button | ^[boolean] | false |
|
||||
| show-week-number | show the week number besides the week | ^[boolean] | false |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -196,7 +196,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| fallback-placements ^(2.8.4) | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | — |
|
||||
| placement ^(2.8.4) | position of dropdown | `Placement` | bottom |
|
||||
| show-footer ^(2.10.5) | whether to show footer | ^[boolean] | true |
|
||||
| show-footer ^(2.10.5) | whether to show footer where the date picker is one ^[enum]`'dates' \| 'months' \| 'years' \| 'datetime' \| 'datetimerange'` | ^[boolean] | true |
|
||||
| show-confirm ^(2.11.0) | whether to show the confirm button | ^[boolean] | true |
|
||||
| show-week-number ^(2.10.3) | show the week number besides the week | `boolean` | false |
|
||||
|
||||
|
||||
@@ -116,7 +116,7 @@ datetime-picker/custom-icon
|
||||
| empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — |
|
||||
| value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — |
|
||||
| show-now ^(2.8.7) | whether to show the now button | ^[boolean] | true |
|
||||
| show-footer ^(2.10.5) | whether to show footer | ^[boolean] | true |
|
||||
| show-footer ^(2.10.5) | whether to show footer where the date picker is one ^[enum]`'datetime' \| 'datetimerange'` | ^[boolean] | true |
|
||||
| show-confirm ^(2.11.0) | whether to show the confirm button | ^[boolean] | true |
|
||||
| show-week-number ^(2.10.3) | show the week number besides the week | `boolean` | false |
|
||||
|
||||
|
||||
@@ -95,7 +95,9 @@ tree-v2/filter
|
||||
|
||||
:::
|
||||
|
||||
## TreeV2 Attributes
|
||||
## TreeV2 API
|
||||
|
||||
### TreeV2 Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------- |
|
||||
@@ -117,7 +119,7 @@ tree-v2/filter
|
||||
| item-size ^(2.2.33) | custom tree node height | ^[number] | 26 |
|
||||
| scrollbar-always-on ^(2.10.4) | always show scrollbar | ^[boolean] | false |
|
||||
|
||||
## props
|
||||
### props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| -------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | -------- |
|
||||
@@ -127,7 +129,7 @@ tree-v2/filter
|
||||
| disabled | specify which key of node object represents if node's checkbox is disabled | ^[string] | disabled |
|
||||
| class ^(2.9.0) | custom node class name | ^[string] / ^[Function]`(data: TreeNodeData, node: TreeNode) => string \| {[key: string]: boolean}` | — |
|
||||
|
||||
## TreeV2 Method
|
||||
### TreeV2 Method
|
||||
|
||||
`Tree` has the following method, which returns the currently selected array of nodes.
|
||||
|
||||
@@ -151,7 +153,7 @@ tree-v2/filter
|
||||
| scrollTo ^(2.8.0) | scroll to a given position | `(offset: number)` |
|
||||
| scrollToNode ^(2.8.0) | scroll to a given tree key with specified scroll strategy | `(key: TreeKey, strategy?: auto \| smart \| center \| start \| end)` |
|
||||
|
||||
## TreeV2 Events
|
||||
### TreeV2 Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ------------------ | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
@@ -164,7 +166,7 @@ tree-v2/filter
|
||||
| node-expand | triggers when current node open | `(data: TreeNodeData, node: TreeNode)` |
|
||||
| node-collapse | triggers when current node close | `(data: TreeNodeData, node: TreeNode)` |
|
||||
|
||||
## TreeV2 Slots
|
||||
### TreeV2 Slots
|
||||
|
||||
| Name | Description |
|
||||
| -------------- | ---------------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -128,7 +128,9 @@ tree/draggable
|
||||
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
## Tree API
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------- |
|
||||
@@ -159,7 +161,7 @@ tree/draggable
|
||||
| allow-drag | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | ^[Function]`(node) => boolean` | — |
|
||||
| allow-drop | this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node) | ^[Function]`(draggingNode, dropNode, type) => boolean` | — |
|
||||
|
||||
## props
|
||||
### props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --------- | ----------------------------------------------------------------------------- | ------------------------------------------------ | ------- |
|
||||
@@ -169,7 +171,7 @@ tree/draggable
|
||||
| isLeaf | specify whether the node is a leaf node, only works when lazy load is enabled | ^[string] / ^[Function]`(data, node) => boolean` | — |
|
||||
| class | custom node class name | ^[string] / ^[Function]`(data, node) => string` | — |
|
||||
|
||||
## Method
|
||||
### Method
|
||||
|
||||
`Tree` has the following method, which returns the currently selected array of nodes.
|
||||
|
||||
@@ -194,7 +196,7 @@ tree/draggable
|
||||
| insertBefore | insert a node before a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
|
||||
| insertAfter | insert a node after a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
|
||||
|
||||
## Events
|
||||
### Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ---------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
@@ -212,7 +214,7 @@ tree/draggable
|
||||
| node-drag-end | triggers when dragging ends | four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be `undefined`), node drop type (before / after / inner), event. |
|
||||
| node-drop | triggers after the dragging node is dropped | four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event. |
|
||||
|
||||
## Slots
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| -------------- | ---------------------------------------------------------------------- |
|
||||
|
||||
Reference in New Issue
Block a user