- Added `clearValidate` method for clearing validating results for all form items, #7623
- MessageBox
- Added `inputType` attribute to assign type for the inner input box, #7651
- Table
- Added `size` attribute
- Added `toggleRowExpansion` method to expand or collapse expandable rows programmatically
- Added `cell-class-name` attribute to assign class name for cells
- Added `cell-style` attribute to style cells
- Added `header-row-class-name` attribute to assign class name for header rows
- Added `header-row-style` attribute to style header rows
- Added `header-cell-class-name` attribute to assign class name for header cells
- Added `header-cell-style` attribute to style header cells
- TableColumn's `prop` attribute now accepts `object[key]` notations
- Added `index` attribute for TableColumn to customize row indices
#### Fixes
- Table
- Fixed a dynamic `max-height` bug
- Fixed some style calculation errors
#### Breaking changes
- Autocomplete
- Removed `props` attribute. Now you can use `value-key` attribute to designate key name of the input suggestion
object for display
- Table
-`append` slot is moved outside the `tbody` element to avoid multiple rendering
-`expand` event is renamed to `expand-change`
- The params of `row-class-name` and `row-style` method is now an object
### 2.0.0-beta.1
### 2.0.0-beta.1
*2017-10-20*
*2017-10-20*
#### New features
#### New features
- General
- General
- Added TypeScript typings
- Added TypeScript typings
- All existing icons are redesigned. Some new icons are added.
- All existing icons are redesigned. Some new icons are added.
- To help you migrate from Element 1.x, we added some console warnings against deprecated APIs. When you use a
- To help you migrate from Element 1.x, we added some console warnings against deprecated APIs. When you use a removed or renamed attribute or event in your project, you'll get a warning like this:
removed or renamed attribute or event in your project, you'll get a warning like this:
```
```
[Element Migrating][ElSwitch][Attribute]: on-color is renamed to active-color.
[Element Migrating][ElSwitch][Attribute]: on-color is renamed to active-color.
```
```
- Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
- Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
- Layout
- Layout
- Added a new breakpoint `xl` for viewport wider than 1920px
- Added a new breakpoint `xl` for viewport wider than 1920px
- Table
- Table
- Added `span-method` attribute for merging cells
- Added `span-method` attribute for merging cells
- Added `clearSort` method to clear sorting programmatically
- Added `clearSort` method to clear sorting programmatically
- Added `clearFilter` method to clear filter programmatically
- Added `clearFilter` method to clear filter programmatically
- For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its styles
- For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its styles
- DatePicker
- DatePicker
- Added `unlink-panels` attribute to unlink the two date panels when selecting a date range
- Added `unlink-panels` attribute to unlink the two date panels when selecting a date range
- Select
- Select
- Added `reserve-keyword` attribute for reserving current search keyword after selecting an option
- Added `reserve-keyword` attribute for reserving current search keyword after selecting an option
#### Fixes
#### Fixes
- Table
- Table
- Now `header-align` of TableColumn works properly
- Now `header-align` of TableColumn works properly
- Fixed a bug that Table remains hiding when its parent element appears from `display: none`
- Fixed a bug that Table remains hiding when its parent element appears from `display: none`
- Fixed Table expanding its width when its parent element has `display: flex`
- Fixed Table expanding its width when its parent element has `display: flex`
- Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched
- Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched
- Fixed `expand-row-keys` attribute not working with initial value
- Fixed `expand-row-keys` attribute not working with initial value
- Fixed filter failing when `data` updates
- Fixed filter failing when `data` updates
- Fixed a calculation error of fixed columns layout with grouped headers
- Fixed a calculation error of fixed columns layout with grouped headers
#### Breaking changes
#### Breaking changes
- Switch
- Switch
- Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not
- Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not
able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
- Table
- Table
-`sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean
-`sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean
### 2.0.0-alpha.3
### 2.0.0-alpha.3
...
@@ -219,685 +253,4 @@ in `lazy` mode #6235
...
@@ -219,685 +253,4 @@ in `lazy` mode #6235
- Now the Steps will fill its parent container by default
- Now the Steps will fill its parent container by default
##
##
<i><sup>*</sup> Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.</i>
<i><sup>*</sup> Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.</i>
\ No newline at end of file
### 1.4.8
*2017-10-24*
- Fixed SubMenu retracting when moving the mouse rapidly on the SubMenu of collapsed Menu, #7579
- Fixed hidden last shortcut of DateTimePicker when the shortcut menu is long, #7567 (by @DuLinRain)
- Added `show-timeout` and `hide-timeout` attributes for Dropdown, #7621 (by @phongkt-dev)
### 1.4.7
*2017-10-16*
- Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai)
- Added `allow-focus` attribute for Switch, #7494 (by @breadadams)
### 1.4.6
*2017-09-27*
- Fixed Slider's button jumping to previous position when clicked, #7190
- Fixed Tooltip `disabled` regression, #7198
- Fixed Cascader not correctly filter options when `props` is set, #7225
- Fixed an error when range typed DatePicker has an initial value of `[]`, #7233
### 1.4.5
*2017-09-24*
- Rate's `colors` attribute now supports dynamic updates, #6872 @lukaszb
- Fixed Tree not highlighting tree node whose value of `node-key` is 0, #6917
- Fixed initially disabled Dropdown not showing menu when it's enabled, #6969
- Added `hide-after` attribute for Tooltip, #6401 @ryatziv
- Fixed cancel button of TimePicker not cancel picked value when clicked, #7028
- Added `selectWhenUnmatched` attribute for Autocomplete, #6428 @ryatziv
- Fixed when `beforeUpload` of a file returns false, other files are aborted by Upload, #7077
- Fixed disabled dates of DatePicker in month view and year view not displayed correctly in the west hemisphere, #7114
-`default-value` of DatePicker now supports daterange type, #7073 @wacky6
### 1.4.4
*2017-09-05*
- Fixed all months disabled in DatePicker month view when `disabledDate` is set, #6768 @qingdengyue
- Added `debounce` attribute for Slider, #6820 @langgo
- Fixed value of Pagination jumper can be bigger than the total page count, #6842 @huguangju
- Fixed TimePicker's focus slipping away when selecting hour to 23 with mouse scroll, #6719 @qingdengyue
### 1.4.3
*2017-08-25*
- Fixed style bug when Progress's `percentage` is `0`, #6551 @Kingwl
- Fixed Carousel items flashing when switching, #6394
- Fixed disabled Button not prevent event propagation when clicked on its text area, #6421
- Fixed disabled dates calculation in DatePicker's month view, #6363
- Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng
- Fixed `amPm` not supported in DatePicker i18n, #6574
- Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593
- Fixed Alert using small icons when its `description` is passed via default slot, #6612 @leezng
### 1.4.2
*2017-08-09*
- Fixed Select marking option of `value` equal to `0` as selected when the initial value is null and bound to an object-typed value, #6143
- Fixed Step style issue when `status` is `error`, #6155 @wacky6
- Fixed Cascader selecting parent item when moving mouse quickly after clicking a leaf item, #6199
- Fixed Menu not hiding submenus when collapsed, #6200
- Fixed status of the inner native input of Switch not syncing with the component, #6205 @wacky6
- Fixed wrong button positioning of Slider after window is resized, #6263
- Fixed Autocomplete not hiding dropdown menu on blur, #6256
- Fixed hitting enter on jumper of Pagination not trigger page change event in IE, #6306 @qingdengyue
- Fixed InputNumber style issue when its `size` is `large` or `small`, #6310 @JeremyWuuuuu
- Fixed i18n failure for some texts in DatePicker, #6328
- Fixed Slider value changing to minimum when its button is clicked, #6359
### 1.4.1
*2017-07-28*
- Fixed child nodes expanding when checking parent node in Tree, #6029
- Fixed checking behavior error of Tree, #6034
- Fixed FormItem not inheriting `label-width` as a Form's direct child, #6044
- Fixed Menu incorrectly showing SubMenu in collapse mode, #6111
- Fixed render order error of `v-if` controlled dynamic TabPanes, #6066
- Fixed Popover still popping up after mouse leaves within `open-delay`, #6058 (by @laobubu)
- Fixed delete buttons still rendered in file list of disabled Upload, #6091
- Fixed background color error on hover of striped Table, #6024 (by @xtongs)
### 1.4.0 Boron
*2017-07-21*
#### New features:
- Message
-`message` attribute now supports VNode, #5463 (by @egyptik)
- Fixed hover style on striped Table, #3696 (by @nicoeg)
- Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)
- Added `delete-tag` event for Select, #3663 (by @pengchongfu)
- Added `onPick` option for DatePicker, #2921
- Added `status` for Step, #3722
- Added full example for on-demand importing, #3302
### 1.2.5
*2017-03-19*
- Added `show-tooltip` property for Slider, #3430 (by @gabrielboliveira)
- Fixed Slider precision not updating when `step` is updated, #3475 (by @gabrielboliveira)
- Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549
- Fixed Table automatically shrinking vertically in some conditions, #3539
- Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)
- Now Col will hide itself if its `xs`, `sm`, `md` or `lg` is set to 0, #3564
### 1.2.4
*2017-03-09*
- Fixed Carousel not responding to dynamic data updates, #3159
- Fixed `cell-dblclick` of Table not firing issue, #3305
- Fixed disabled Cascader not displaying initial value, #3297
- Fixed Slider not correctly displaying initial value when `show-input` is true, #3281
- Fixed Tooltip error in server-side rendering, #3214
- Fixed `range-separator` of DatePicker not working issue, #3378
- Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)
- Added `http-request` attribute for Upload, #3387
- Added support for hiding col if its `span` is 0, #3313
### 1.2.3
*2017-03-01*
- Fixed Tooltip, #3152
### 1.2.2
*2017-02-28*
- Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097
- Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035
- Fixed incorrect parameter of `change` event of Cascader, #3014
- Add `change` event for ColorPicker, #3049 (by @nicoeg)
- Fixed `setCheckedKeys` method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)
- Fixed Tooltip not compatible with `router-link`, #3143
### 1.2.1
*2017-02-23*
- Fixed SSR regression in version 1.2.0, #2982
- Fixed horizontal scroll buttons not showing in Tabs, #2974
- Fixed wrong calculation of height after the `height` attribute is updated dynamically in Table, #2979
- Added `cell-dblclick` and `header-dragend` events for Table, #2983 #2988
- Fixed form items showing a left padding inside an inline Form with a specified `label-width`, #2990
- Fixed Cascader's dropdown misplaces in some conditions, #2992
### 1.2.0 Lithium
*2017-02-22*
#### New features:
- Two brand new components: Cascader and ColorPicker
- New attributes `editable` and `addable`, and new events `tab-add` and `edit` for Tabs
- Language config files in UMD format
- New events `node-expand` and `node-collapse` for Tree, #2507 (by @masterzhang)
- New attribute `indent` for Tree, #2713
- Dialog's title now supports named slot, #2657
- New attribute `range` for Slider, #2751
- Upload
- Attribute `auto-upload` that controls if files are uploaded immediately after selecting, and its default value is `true`
- Event `on-change` that fires when file status changes
- Attribute `list-type` that configures the appearance of file list
- Scroll bars in Autocomplete are made prettier
#### Fixes:
- Carousel not responding to contents' update, #2775
- Numbers in TimePicker not align in some conditions, #2948
- TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)
- Tabs' display order error when tab-pane is dynamically changed, #2898
- Menu highlighting menu-item when `default-active` is assigned to an non-existent item
- Collapse's style issue when nested
#### Breaking changes:
- Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459
- The backdrop of Dialog now inserts to body element by default, #2556
- Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567
- Upload is refactored
-`default-file-list` renamed to `file-list`, and `show-upload-list` renamed to `show-file-list`
-`thumbnail-mode` removed
### 1.1.6
*2017-01-23*
- Fixed `customClass` of MessageBox affecting follow-up instances, #2472
- Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466
- Fixed style missing issue for some components when imported on demand
- Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540
- Restored returning to original sorting in sortable Table columns, #2491
- Added `reset.css` in `theme-default`, #2378
- Added `range-separator` attribute for DatePicker, #2579
- Published individual component packages: Table, DatePicker, Loading, Upload and Carousel
- Add Finnish (@groenroos)
### 1.1.5
*2017-01-17*
- Fixed Menu not activating corresponding menu item after router switching in router mode, #2451
- Fixed `value` attribute of Collapse not supporting `Number` typed value, #2455
### 1.1.4
*2017-01-16*
- Fixed Input Number triggering `change` event when bound value is changed programmatically, #2329
- Fixed Menu not responding to `$router` changing in router mode, #2391
- Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354
- Fixed `change` event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically
- Added `on-icon-click` attribute for Input, #2414
- Added `disabled` attribute for Radio Group, #2411
- Added `accordion` attribute for Tree, #2408
- Added `show-message` attribute for Form, #2356
- Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)
- Fixed `firstDayOfWeek` not working in ranged typed of DatePicker, #2353
- Fixed DatePicker displaying 1970 when initial value is null, #2388
- Fixed `filteredValue` attribute for Table, #2348
- Fixed scrollable Table's style with empty data, #2396
- Added `beforeClose` attribute for MessageBox, #2204
- Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389
Breaking change
- The `default-sort-prop` and `default-sort-order` attributes added in 1.1.3 are now merged into an object-typed attribute
### 1.1.3
*2017-01-09*
- Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167
- Fixed DatePicker year calculating error when choosing the next year, #2152
- Added `default-sort-prop` and `default-sort-order` attributes for Table, #2182 (by @njleonzhang)
- Fixed filterable Select filtering other options with initial value, #2196
- Added custom i18n processing, making Element compatible with i18n plugins other than `vue-i18n`, #2129
- Added `resize` attribute for Input, #2263 (by @Kingwl)
- Fixed Autocomplete not hiding dropdown when blurred, #2247
- Fixed style issues with nested Tabs, #2212 (by @Kingwl)
- Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192
### 1.1.2
*2016-12-30*
- Fixed `sortable` and `fixed` attribute of Table not working in Vue 2.1.7+
- Fixed Input Number not resetting on blur when input with illegal values, #2098
- Removed `title` scoped slot of Collapse, and added `title` named slot, #2100
- Fixed range selection in TimePicker not working issue
- Fixed Tabs' active tab switching when a non-active tab is removed, #2106
- Fixed console error reporting when navigating Select with arrow keys, #2120
- Fixed incorrect validation timing of filterable Select in Form, #2120
### 1.1.1
*2016-12-29*
- Fixed compatibility issue with latest Vue due to compilation
### 1.1.0 Helium
*2016-12-29*
#### New features:
- Two brand new components: Carousel and Collapse
- SSR supported
- Scrollbars' style inside components is upgraded
- Table now supports custom templates via [scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots); the good old `inline-template` is still compatible, but it's no longer recommended and is likely to be removed in the future
- Table now supports expandable rows
- DatePicker now supports specifying the first day of week
- TimeSelect now supports `maxTime`
- Autocomplete now supports `popper-class`
- To customize template of Tab-Pane, now you can use the `slot` named `label`
#### Fixes:
-`change` event of DatePicker incorrectly triggering multiple times, #2070
- Width shaking of tab-pane while initializing, #1883
#### Breaking changes:
- Only compatible with Vue 2.1.6 and beyond
- Parameters of Form validateField() methods are updated
- Alert's render-content attribute is removed, and now you can pass your custom template via default slot
- The box models of Input and Select are updated from `block` to `inline-block`
- The box model of Tabs is updated from `inline-block` to `block`, and Tab-Pane's `label-content` attribute is removed
- The dropdown of Autocomplete now inserts directly to `<body>`, not `<el-autocomplete>` any more
- Fixed Loading locks scroll of `body` in specific scenarios, #968
-`span` of Col is no longer a required attribute, and its default value is `24` if omitted
- Added `disabled` and `editable` attribute for DatePicker, #976
- Fixed DatePicker readonly with native behavior, #976
- Added `close` method for Message and Notification to manually close an instance
- Added clear value feature for DatePicker, #759
- Fixed Form reports an error when resetting a Date typed field, #937
- Fixed Table render error using vue-loader 9.9.0
- Added `align-center` attribute for Step, #994
- Fixed Upload missing Progress component, #1013
- Layout now supports responsive layout
- Added `show-close` for Dialog
- Fixed an error when `vue-i18n` is imported but not configured, #973
- Fixed DatePicker not refresh view with an initial value, #1050
- Fixed DiatePicker not refresh year when switched in month picker, #1070
- Added $loading service
- Added `manual` trigger in Popover
- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
### Changing theme color
### Changing theme color
Under construction.
If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
### Update SCSS variables in your project
`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:
:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
```html
```html
<template>
<template>
...
@@ -1865,23 +1865,60 @@ Configuring rowspan and colspan allows you to merge cells
...
@@ -1865,23 +1865,60 @@ Configuring rowspan and colspan allows you to merge cells
</el-table-column>
</el-table-column>
<el-table-column
<el-table-column
prop="date"
prop="date"
label="日期"
label="Date"
width="180">
width="180">
</el-table-column>
</el-table-column>
<el-table-column
<el-table-column
prop="name"
prop="name"
label="姓名"
label="Name"
width="180">
width="180">
</el-table-column>
</el-table-column>
<el-table-column
<el-table-column
prop="address"
prop="address"
label="地址">
label="Address">
</el-table-column>
</el-table-column>
</el-table>
</el-table>
</template>
</template>
<script>
<script>
exportdefault{
exportdefault{
data(){
return{
tableData:[{
date:'2016-05-03',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Home'
},{
date:'2016-05-02',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Office'
},{
date:'2016-05-04',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Home'
},{
date:'2016-05-01',
name:'Tom',
state:'California',
city:'Los Angeles',
address:'No. 189, Grove St, Los Angeles',
zip:'CA 90036',
tag:'Office'
}],
}
},
methods:{
methods:{
indexMethod(index){
indexMethod(index){
returnindex*2;
returnindex*2;
...
@@ -1906,13 +1943,13 @@ Configuring rowspan and colspan allows you to merge cells
...
@@ -1906,13 +1943,13 @@ Configuring rowspan and colspan allows you to merge cells
| highlight-current-row | whether current row is highlighted | boolean | — | false |
| highlight-current-row | whether current row is highlighted | boolean | — | false |
| current-row-key | key of current row, a set only prop | string,number | — | — |
| current-row-key | key of current row, a set only prop | string,number | — | — |
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
| row-style | function that returns custom style for a row, or a string assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, rowIndex})/String | — | — |
| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, rowIndex})/String | — | — |
| cell-style | function that returns custom style for a cell, or a string assigning custom style for every cell | Function({row, rowIndex})/Object | — | — |
| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, rowIndex})/Object | — | — |
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
| header-row-style | function that returns custom style for a row in table header, or a string assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, rowIndex})/String | — | — |
| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, rowIndex})/String | — | — |
| header-cell-style | function that returns custom style for a cell in table header, or a string assigning custom style for every cell in table header | Function({row, rowIndex})/Object | — | — |
| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, rowIndex})/Object | — | — |
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
...
@@ -1949,7 +1986,7 @@ Configuring rowspan and colspan allows you to merge cells
...
@@ -1949,7 +1986,7 @@ Configuring rowspan and colspan allows you to merge cells
|------|--------|-------|
|------|--------|-------|
| clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
| clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
| toggleRowExpanded | used in expand Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded | row, expanded |
| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
| clearSort | clear sorting, restore data to the original order | — |
| clearSort | clear sorting, restore data to the original order | — |
| clearFilter | clear filter | — |
| clearFilter | clear filter | — |
...
@@ -1963,7 +2000,7 @@ Configuring rowspan and colspan allows you to merge cells
...
@@ -1963,7 +2000,7 @@ Configuring rowspan and colspan allows you to merge cells
| 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. | string | selection/index/expand | — |
| 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. | string | selection/index/expand | — |
| index | customize indices for each row, works on columns with `type=index` | string, Function(index) | - | - |
| label | column label | string | — | — |
| 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 | 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 | string | — | — |
| prop | field name. You can also use its alias: `property` | string | — | — |
| prop | field name. You can also use its alias: `property` | string | — | — |