mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 11:17:46 +08:00
chore: format code (#16016)
This commit is contained in:
btea
GitHub
parent
f8ca913a1d
commit
3ff8bbeaf8
@ -13,7 +13,7 @@
|
||||
overflow-y: auto;
|
||||
transform: translate(-100%);
|
||||
transition: background-color var(--el-transition-duration-fast), opacity 0.25s,
|
||||
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
|
||||
&.open {
|
||||
transform: translate(0);
|
||||
|
||||
@ -77,47 +77,45 @@ anchor/affix
|
||||
|
||||
### Anchor Attributes
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | ---------------------------------------- | ----------------------------------------------------- | ------- |
|
||||
| container | scroll container. | `string` \| `HTMLElement` \| `Window ` | — |
|
||||
| offset | set the offset of the anchor scroll. | `number` | 0 |
|
||||
| bound | the offset of the element starting to trigger the anchor. | `number` | 15 |
|
||||
| duration | set the scroll duration of the container, in milliseconds. | `number` | 300 |
|
||||
| marker | whether to show the marker. | ^[boolean] | true |
|
||||
| type | set Anchor type. | ^[enum]`'defalut' \| 'underline'` | `default` |
|
||||
| direction | Set Anchor direction. | ^[enum]`'vertical' \| 'horizontal'` | `vertical` |
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | ---------------------------------------------------------- | -------------------------------------- | ---------- |
|
||||
| container | scroll container. | `string` \| `HTMLElement` \| `Window ` | — |
|
||||
| offset | set the offset of the anchor scroll. | `number` | 0 |
|
||||
| bound | the offset of the element starting to trigger the anchor. | `number` | 15 |
|
||||
| duration | set the scroll duration of the container, in milliseconds. | `number` | 300 |
|
||||
| marker | whether to show the marker. | ^[boolean] | true |
|
||||
| type | set Anchor type. | ^[enum]`'defalut' \| 'underline'` | `default` |
|
||||
| direction | Set Anchor direction. | ^[enum]`'vertical' \| 'horizontal'` | `vertical` |
|
||||
|
||||
### Anchor Events
|
||||
|
||||
| Name | Description | Type |
|
||||
| ------ | ------------------------------ | -------------------------------------- |
|
||||
| change | callback when the step changes | ^[Function]`(href: string) => void` |
|
||||
| click | Triggered when the user clicks on the link | ^[Function]`(e: MouseEvent, href?: string) => void` |
|
||||
| Name | Description | Type |
|
||||
| ------ | ------------------------------------------ | --------------------------------------------------- |
|
||||
| change | callback when the step changes | ^[Function]`(href: string) => void` |
|
||||
| click | Triggered when the user clicks on the link | ^[Function]`(e: MouseEvent, href?: string) => void` |
|
||||
|
||||
### Anchor Methods
|
||||
|
||||
| Name | Description | Type |
|
||||
| ---------- | ------------------------------------------------------------- | ------- |
|
||||
| scrollTo | Manually scroll to the specific position. | ^[Function]`(href: string) => void`|
|
||||
|
||||
| Name | Description | Type |
|
||||
| -------- | ----------------------------------------- | ----------------------------------- |
|
||||
| scrollTo | Manually scroll to the specific position. | ^[Function]`(href: string) => void` |
|
||||
|
||||
### Anchor Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---------- | ------------------------------------------------------------- |
|
||||
| default | AnchorLink component list |
|
||||
|
||||
| Name | Description |
|
||||
| ------- | ------------------------- |
|
||||
| default | AnchorLink component list |
|
||||
|
||||
### AnchorLink Attributes
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------- | ---------------------------------------- | ----------------------------------------------------- | ------- |
|
||||
| title | the text content of the anchor link. | `string` | — |
|
||||
| href | The address of the anchor link. | `string` | - |
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------------------------------ | -------- | ------- |
|
||||
| title | the text content of the anchor link. | `string` | — |
|
||||
| href | The address of the anchor link. | `string` | - |
|
||||
|
||||
### AnchorLink Slots
|
||||
|
||||
| Name | Description |
|
||||
| -------- | ----------- |
|
||||
| default | the content of the anchor link. |
|
||||
| sub-link | slots for child links. |
|
||||
| Name | Description |
|
||||
| -------- | ------------------------------- |
|
||||
| default | the content of the anchor link. |
|
||||
| sub-link | slots for child links. |
|
||||
|
||||
@ -51,14 +51,14 @@ badge/dot
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| ------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
|
||||
| value | display value. | ^[string] / ^[number] | '' |
|
||||
| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
|
||||
| is-dot | if a little dot is displayed. | ^[boolean] | false |
|
||||
| hidden | hidden badge. | ^[boolean] | false |
|
||||
| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
|
||||
| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
|
||||
| value | display value. | ^[string] / ^[number] | '' |
|
||||
| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
|
||||
| is-dot | if a little dot is displayed. | ^[boolean] | false |
|
||||
| hidden | hidden badge. | ^[boolean] | false |
|
||||
| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
|
||||
| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -77,20 +77,20 @@ carousel/vertical
|
||||
|
||||
## Carousel Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ---------------------- | ----------------------------------------------------- | ------- | ------------------- | ---------- |
|
||||
| height | height of the carousel | string | — | — |
|
||||
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
|
||||
| trigger | how indicators are triggered | string | hover/click | hover |
|
||||
| autoplay | whether automatically loop the slides | boolean | — | true |
|
||||
| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
|
||||
| indicator-position | position of the indicators | string | outside/none | — |
|
||||
| arrow | when arrows are shown | string | always/hover/never | hover |
|
||||
| type | type of the Carousel | string | card | — |
|
||||
| loop | display the items in loop | boolean | - | true |
|
||||
| direction | display direction | string | horizontal/vertical | horizontal |
|
||||
| pause-on-hover | pause autoplay when hover | boolean | - | true |
|
||||
| motion-blur ^(2.6.0) | infuse dynamism and smoothness into the carousel | boolean | - | false |
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| -------------------- | ----------------------------------------------------- | ------- | ------------------- | ---------- |
|
||||
| height | height of the carousel | string | — | — |
|
||||
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
|
||||
| trigger | how indicators are triggered | string | hover/click | hover |
|
||||
| autoplay | whether automatically loop the slides | boolean | — | true |
|
||||
| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
|
||||
| indicator-position | position of the indicators | string | outside/none | — |
|
||||
| arrow | when arrows are shown | string | always/hover/never | hover |
|
||||
| type | type of the Carousel | string | card | — |
|
||||
| loop | display the items in loop | boolean | - | true |
|
||||
| direction | display direction | string | horizontal/vertical | horizontal |
|
||||
| pause-on-hover | pause autoplay when hover | boolean | - | true |
|
||||
| motion-blur ^(2.6.0) | infuse dynamism and smoothness into the carousel | boolean | - | false |
|
||||
|
||||
## Carousel Events
|
||||
|
||||
|
||||
@ -88,7 +88,7 @@ checkbox/with-border
|
||||
### Checkbox Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------|---------|
|
||||
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------- |
|
||||
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| value ^(2.6.0) | value of the Checkbox when used inside a `checkbox-group` | ^[string] / ^[number] / ^[boolean] / ^[object] | — |
|
||||
| label | label of the Checkbox when used inside a `checkbox-group`. If there's no value, `label` will act as `value` | ^[string] / ^[number] / ^[boolean] / ^[object] | — |
|
||||
@ -124,7 +124,7 @@ checkbox/with-border
|
||||
### CheckboxGroup Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
|-----------------------|---------------------------------------------------|------------------------------------------|---------|
|
||||
| --------------------- | ------------------------------------------------- | ---------------------------------------- | ------- |
|
||||
| model-value / v-model | binding value | ^[object]`string[] \| number[]` | [] |
|
||||
| size | size of checkbox | ^[enum]`'large' \| 'default' \| 'small'` | — |
|
||||
| disabled | whether the nesting checkboxes are disabled | ^[boolean] | false |
|
||||
@ -153,7 +153,7 @@ checkbox/with-border
|
||||
### CheckboxButton Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
|---------------------------|-------------------------------------------------------------------------------------------------------------|------------------------------------------------|---------|
|
||||
| ------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------- |
|
||||
| value ^(2.6.0) | value of the checkbox when used inside a `checkbox-group` | ^[string] / ^[number] / ^[boolean] / ^[object] | — |
|
||||
| label | label of the checkbox when used inside a `checkbox-group`. If there's no value, `label` will act as `value` | ^[string] / ^[number] / ^[boolean] / ^[object] | — |
|
||||
| true-value ^(2.6.0) | value of the checkbox if it's checked | ^[string] / ^[number] | — |
|
||||
|
||||
@ -147,35 +147,35 @@ 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]` | '' |
|
||||
| readonly | whether DatePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| size | size of Input | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | '' |
|
||||
| start-placeholder | placeholder for the start date in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | ^[string] | — |
|
||||
| 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]` | '' |
|
||||
| readonly | whether DatePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether DatePicker is disabled | ^[boolean] | false |
|
||||
| size | size of Input | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
|
||||
| editable | whether the input is editable | ^[boolean] | true |
|
||||
| clearable | whether to show clear button | ^[boolean] | true |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | '' |
|
||||
| start-placeholder | placeholder for the start date in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end date in range mode | ^[string] | — |
|
||||
| type | type of the picker | ^[enum]`'year' \| 'years' \|'month' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange'` | date |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD |
|
||||
| popper-class | custom class name for DatePicker's dropdown | ^[string] | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial<PopperOptions>` | {} |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| 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] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] / ^[object]`[string, string]` | '' |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| prefix-icon | custom prefix icon component. By default, if the value of `type` is `TimeLikeType`, the value is `Clock`, else is `Calendar` | ^[string] / ^[object]`Component` | '' |
|
||||
| clear-icon | custom clear icon component | ^[string] / ^[object]`Component` | `CircleClose` |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| 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` | — |
|
||||
| teleported | whether date-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | YYYY-MM-DD |
|
||||
| popper-class | custom class name for DatePicker's dropdown | ^[string] | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | ^[object]`Partial<PopperOptions>` | {} |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| 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] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] / ^[object]`[string, string]` | '' |
|
||||
| unlink-panels | unlink two date-panels in range-picker | ^[boolean] | false |
|
||||
| prefix-icon | custom prefix icon component. By default, if the value of `type` is `TimeLikeType`, the value is `Clock`, else is `Calendar` | ^[string] / ^[object]`Component` | '' |
|
||||
| clear-icon | custom clear icon component | ^[string] / ^[object]`Component` | `CircleClose` |
|
||||
| validate-event | whether to trigger form validation | ^[boolean] | true |
|
||||
| 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` | — |
|
||||
| teleported | whether date-picker dropdown is teleported to the body | ^[boolean] | true |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ menu/popper-offset
|
||||
## Menu Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
|--------|-------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| ------ | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item, routeResult: result returned by `vue-router` if `router` is enabled |
|
||||
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
|
||||
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
|
||||
@ -103,13 +103,13 @@ menu/popper-offset
|
||||
## Menu Slots
|
||||
|
||||
| Name | Description | Subtags |
|
||||
|------|---------------------------|---------------------------------------|
|
||||
| ---- | ------------------------- | ------------------------------------- |
|
||||
| — | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
|
||||
|
||||
## SubMenu Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|-----------------|-------------------------------------------------|
|
||||
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------- | ----------------------------------------------- |
|
||||
| index | unique identification | string | — | — |
|
||||
| popper-class | custom class name for the popup menu | string | — | — |
|
||||
| show-timeout | timeout before showing a sub-menu(inherit `show-timeout` of the menu by default.) | number | — | — |
|
||||
@ -126,14 +126,14 @@ menu/popper-offset
|
||||
## SubMenu Slots
|
||||
|
||||
| Name | Description | Subtags |
|
||||
|-------|---------------------------|---------------------------------------|
|
||||
| ----- | ------------------------- | ------------------------------------- |
|
||||
| — | customize default content | SubMenu / Menu-Item / Menu-Item-Group |
|
||||
| title | customize title content | — |
|
||||
|
||||
## Menu-Item Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
|----------|-----------------------|-------------|-----------------|---------|
|
||||
| -------- | --------------------- | ----------- | --------------- | ------- |
|
||||
| index | unique identification | string/null | — | null |
|
||||
| route | Vue Router object | object | — | — |
|
||||
| disabled | whether disabled | boolean | — | false |
|
||||
@ -141,25 +141,25 @@ menu/popper-offset
|
||||
## Menu-Item Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
|-------|---------------------------------------------|------------------------|
|
||||
| ----- | ------------------------------------------- | ---------------------- |
|
||||
| click | callback function when menu-item is clicked | el: menu-item instance |
|
||||
|
||||
## Menu-Item Slots
|
||||
|
||||
| Name | Description |
|
||||
|-------|---------------------------|
|
||||
| ----- | ------------------------- |
|
||||
| — | customize default content |
|
||||
| title | customize title content |
|
||||
|
||||
## Menu-Item-Group Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
|-------|-------------|--------|-----------------|---------|
|
||||
| ----- | ----------- | ------ | --------------- | ------- |
|
||||
| title | group title | string | — | — |
|
||||
|
||||
## Menu-Item-Group Slots
|
||||
|
||||
| Name | Description | Subtags |
|
||||
|-------|---------------------------|-----------|
|
||||
| ----- | ------------------------- | --------- |
|
||||
| — | customize default content | Menu-Item |
|
||||
| title | customize group title | — |
|
||||
|
||||
@ -68,7 +68,7 @@ radio/with-borders
|
||||
### Radio Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
|-----------------------|------------------------------------------------------------------------|------------------------------------------|---------|
|
||||
| --------------------- | ---------------------------------------------------------------------- | ---------------------------------------- | ------- |
|
||||
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| value ^(2.6.0) | the value of Radio | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| label | the label of Radio. If there's no `value`, `label` will act as `value` | ^[string] / ^[number] / ^[boolean] | — |
|
||||
@ -94,7 +94,7 @@ radio/with-borders
|
||||
### RadioGroup Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
|-----------------------|---------------------------------------------------|------------------------------------|---------|
|
||||
| --------------------- | ------------------------------------------------- | ---------------------------------- | ------- |
|
||||
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| size | the size of radio buttons or bordered radios | ^[string] | default |
|
||||
| disabled | whether the nesting radios are disabled | ^[boolean] | false |
|
||||
@ -122,7 +122,7 @@ radio/with-borders
|
||||
### RadioButton Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
|----------------|------------------------------------------------------------------------|------------------------------------|---------|
|
||||
| -------------- | ---------------------------------------------------------------------- | ---------------------------------- | ------- |
|
||||
| value ^(2.6.0) | the value of Radio | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| label | the label of Radio. If there's no `value`, `label` will act as `value` | ^[string] / ^[number] / ^[boolean] | — |
|
||||
| disabled | whether Radio is disabled | ^[boolean] | false |
|
||||
|
||||
@ -305,7 +305,6 @@ table/table-layout
|
||||
| append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. | — |
|
||||
| empty | you can customize content when data is empty. | — |
|
||||
|
||||
|
||||
### Table Exposes
|
||||
|
||||
| Method | Description | Type |
|
||||
@ -328,36 +327,36 @@ table/table-layout
|
||||
|
||||
### Table-column Attributes
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon | ^[enum]`'default' \| 'selection' \| 'index' \| 'expand'` | default |
|
||||
| index | customize indices for each row, works on columns with `type=index` | ^[number] / ^[Function]`(index: number) => number` | — |
|
||||
| label | column label | ^[string] | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | ^[string] | — |
|
||||
| prop | field name. You can also use its alias: `property` | ^[string] | — |
|
||||
| width | column width | ^[string] / ^[number] | '' |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | ^[string] / ^[number] | '' |
|
||||
| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | ^[enum]`'left' \| 'right'` / ^[boolean] | false |
|
||||
| render-header | render function for table header of this column | ^[Function]`(data: { column: any, $index: number }) => void` | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | ^[boolean] / ^[string] | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | ^[Function]`<T = any>(a: T, b: T) => number` | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | ^[Function]`(row: any, index: number) => string` / ^[string] / ^[object]`string[]` | — |
|
||||
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | ^[object]`('ascending' \| 'descending' \| null)[]` | ['ascending', 'descending', null] |
|
||||
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | ^[boolean] | true |
|
||||
| formatter | function that formats cell content | ^[function]`(row: any, column: any, cellValue: any, index: number) => VNode \| string` | — |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | ^[boolean] / [`object`](#table-attributes) ^(2.2.28) | undefined |
|
||||
| align | alignment | ^[enum]`'left' \| 'center' \| 'right'` | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | ^[enum]`'left' \| 'center' \| 'right'` | left |
|
||||
| class-name | class name of cells in the column | ^[string] | — |
|
||||
| label-class-name | class name of the label of this column | ^[string] | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | ^[Function]`(row: any, index: number) => boolean` | — |
|
||||
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | ^[boolean] | false |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | ^[object]`Array<{text: string, value: string}>` | — |
|
||||
| filter-placement | placement for the filter dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | — |
|
||||
| filter-class-name ^(2.5.0) | className for the filter dropdown | ^[string] | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | ^[boolean] | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | ^[function]`(value: any, row: any, column: any) => void` | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | ^[object]`string[]` | — |
|
||||
| Name | Description | Type | Default |
|
||||
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
|
||||
| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon | ^[enum]`'default' \| 'selection' \| 'index' \| 'expand'` | default |
|
||||
| index | customize indices for each row, works on columns with `type=index` | ^[number] / ^[Function]`(index: number) => number` | — |
|
||||
| label | column label | ^[string] | — |
|
||||
| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | ^[string] | — |
|
||||
| prop | field name. You can also use its alias: `property` | ^[string] | — |
|
||||
| width | column width | ^[string] / ^[number] | '' |
|
||||
| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | ^[string] / ^[number] | '' |
|
||||
| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | ^[enum]`'left' \| 'right'` / ^[boolean] | false |
|
||||
| render-header | render function for table header of this column | ^[Function]`(data: { column: any, $index: number }) => void` | — |
|
||||
| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | ^[boolean] / ^[string] | false |
|
||||
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | ^[Function]`<T = any>(a: T, b: T) => number` | — |
|
||||
| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | ^[Function]`(row: any, index: number) => string` / ^[string] / ^[object]`string[]` | — |
|
||||
| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | ^[object]`('ascending' \| 'descending' \| null)[]` | ['ascending', 'descending', null] |
|
||||
| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | ^[boolean] | true |
|
||||
| formatter | function that formats cell content | ^[function]`(row: any, column: any, cellValue: any, index: number) => VNode \| string` | — |
|
||||
| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | ^[boolean] / [`object`](#table-attributes) ^(2.2.28) | undefined |
|
||||
| align | alignment | ^[enum]`'left' \| 'center' \| 'right'` | left |
|
||||
| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | ^[enum]`'left' \| 'center' \| 'right'` | left |
|
||||
| class-name | class name of cells in the column | ^[string] | — |
|
||||
| label-class-name | class name of the label of this column | ^[string] | — |
|
||||
| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | ^[Function]`(row: any, index: number) => boolean` | — |
|
||||
| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | ^[boolean] | false |
|
||||
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | ^[object]`Array<{text: string, value: string}>` | — |
|
||||
| filter-placement | placement for the filter dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | — |
|
||||
| filter-class-name ^(2.5.0) | className for the filter dropdown | ^[string] | — |
|
||||
| filter-multiple | whether data filtering supports multiple options | ^[boolean] | true |
|
||||
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | ^[function]`(value: any, row: any, column: any) => void` | — |
|
||||
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | ^[object]`string[]` | — |
|
||||
|
||||
### Table-column Slots
|
||||
|
||||
@ -388,6 +387,7 @@ interface TreeNode {
|
||||
display?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## FAQ
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
@use 'common/var' as *;
|
||||
|
||||
@include b(anchor) {
|
||||
|
||||
@include e(item) {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
@ -26,7 +25,8 @@
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: getCssVar('anchor-color');
|
||||
}
|
||||
|
||||
@ -38,5 +38,4 @@
|
||||
& .#{$namespace}-anchor__list .#{$namespace}-anchor__item a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
@include set-component-css-var('anchor', $anchor);
|
||||
|
||||
position: relative;
|
||||
background-color: getCssVar('anchor-bg-color') ;
|
||||
background-color: getCssVar('anchor-bg-color');
|
||||
|
||||
@include e(marker) {
|
||||
position: absolute;
|
||||
@ -19,7 +19,6 @@
|
||||
}
|
||||
|
||||
&.#{$namespace}-anchor--vertical {
|
||||
|
||||
@include e(marker) {
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
@ -39,24 +38,23 @@
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: rgba(5, 5, 5, 0.06);
|
||||
content: "";
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
@include e(marker) {
|
||||
width: 2px;
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.#{$namespace}-anchor--horizontal {
|
||||
|
||||
@include e(marker) {
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
bottom: 0;
|
||||
transition: left .25s ease-in-out,opacity .25s, width .25s;
|
||||
transition: left 0.25sease-in-out, opacity 0.25s,
|
||||
width 0.25s;
|
||||
}
|
||||
|
||||
@include e(list) {
|
||||
@ -79,15 +77,13 @@
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: rgba(5, 5, 5, 0.06);
|
||||
content: "";
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
@include e(marker) {
|
||||
height: 2px;
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -465,7 +465,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include b(input-hidden) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user