VDataTable API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| cell-props | ||
| An object of additional props to be passed to each <td> in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in cellProps in a headers object, the value from the headers object will be used. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| custom-filter | ||
| Function to filter items. | ||
| custom-key-filter | ||
| Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified. | ||
| custom-key-sort | ||
| Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified. | ||
| density | ||
| Adjusts the vertical height of the table rows. | ||
| disable-sort | ||
| Disables sorting completely. | ||
| expand-on-click | ||
| Expands item when the row is clicked. | ||
| expanded | ||
| Whether the item is expanded or not. | ||
| filter-keys | ||
| Array of specific keys to filter on the item. | ||
| filter-mode | ||
| Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. some: There is at least one match from either the custom filter or the custom key filter. every: All columns match either the custom filter or the custom key filter. union: There is at least one match from the custom filter, or all columns match the custom key filters. intersection: There is at least one match from the custom filter, and all columns match the custom key filters. | ||
| first-icon | ||
| First icon. | ||
| first-page-label | ||
| Label for first page. | ||
| fixed-footer | ||
| Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table. | ||
| fixed-header | ||
| Fixed header to top of table. | ||
| group-by | ||
| Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: group or ['group']. When using an array, only the first element is considered. Can be used with .sync modifier. | ||
| header-props | ||
| Pass props to the default header. See v-data-table-header API for more information. | ||
| headers | ||
| An array of objects that each describe a header column. See the example below for a definition of all properties. | ||
| height | ||
| Set an explicit height of table. | ||
| hide-default-body | ||
| Hides the default body. | ||
| hide-default-footer | ||
| Hides the default footer. This has no effect on v-data-table-virtual. | ||
| hide-default-header | ||
| Hides the default header. | ||
| hide-no-data | ||
| Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the items array changes if not already open. | ||
| hover | ||
| Adds a hover effects to a table rows. | ||
| item-selectable | ||
| Property on supplied items that indicates whether the item is selectable. | ||
| item-value | ||
| Property on supplied items that contains its value. | ||
| items | ||
| An array of strings or objects used for automatically generating children components. | ||
| items-per-page | ||
| Changes how many items per page should be visible. Can be used with .sync modifier. Setting this prop to -1 will display all items on the page. | ||
| items-per-page-options | ||
| Array of options to show in the items-per-page dropdown. | ||
| items-per-page-text | ||
| Text for items-per-page dropdown. | ||
| last-icon | ||
| Last icon. | ||
| last-page-label | ||
| Label for last page. | ||
| loading | ||
| Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color. | ||
| loading-text | ||
| Text shown when the data is loading. | ||
| mobile | ||
| Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint | ||
| mobile-breakpoint | ||
| Overrides the display configuration default screen size that the component should be considered in mobile. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| multi-sort | ||
| If true then one can sort on multiple properties. | ||
| must-sort | ||
| If true then one can not disable sorting, it will always switch between ascending and descending. | ||
| next-icon | ||
| Next icon. | ||
| next-page-label | ||
| Label for next page. | ||
| no-data-text | ||
| Text shown when no items are provided to the component. | ||
| no-filter | ||
| Disables all item filtering. | ||
| page | ||
| The current displayed page number (1-indexed). | ||
| page-text | ||
| Label for page number. | ||
| prev-icon | ||
| Previous icon. | ||
| prev-page-label | ||
| Label for previous page. | ||
| return-object | ||
| Changes the selection behavior to return the object directly rather than the value specified with item-value. | ||
| row-props | ||
| An object of additional props to be passed to each <tr> in the table body. Also accepts a function that will be called for each row. | ||
| search | ||
| Text input used to filter items. | ||
| select-strategy | ||
| Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list). | ||
| show-current-page | ||
| Show current page number between prev/next icons. | ||
| show-expand | ||
| Shows the expand toggle in default rows. | ||
| show-select | ||
| Shows the select checkboxes in both the header and rows (if using default rows). | ||
| sort-asc-icon | ||
| Icon used for ascending sort button. | ||
| sort-by | ||
| Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier. | ||
| sort-desc-icon | ||
| Icon used for descending sort button. | ||
| sticky | ||
| Sticks the header to the top of the table. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| value-comparator | ||
| Apply a custom comparison algorithm to compare model-value and values contains in the items prop. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| update:currentItems | |
| MISSING DESCRIPTION (edit in github ) | |
| update:expanded | |
| Emits when the expanded property of the options prop is updated. | |
| update:groupBy | |
| Emits when the group-by property of the options property is updated. | |
| update:itemsPerPage | |
| Emits when the items-per-page property of the options prop is updated. | |
| update:modelValue | |
| Emits when the component’s model changes. | |
| update:options | |
| Emits when one of the options properties is updated. | |
| update:page | |
| Emits when the page property of the options prop is updated. | |
| update:sortBy | |
| Emits when the sortBy property of the options prop is updated. | |
插槽
| body |
| Slot to replace the default table <tbody>. |
| body.append |
| Appends elements to the end of the default table <tbody>. |
| body.prepend |
| Prepends elements to the start of the default table <tbody>. |
| bottom |
| Slot for custom rendering of a data table footer. |
| colgroup |
| Slot to replace the default rendering of the <colgroup> element. |
| data-table-group |
| Slot for custom rendering of a group. |
| data-table-select |
| Slot for custom rendering of a header cell with the select checkbox. |
| default |
| The default Vue slot. |
| expanded-row |
| Slot for custom rendering of an expanded row. |
| footer.prepend |
| Adds content to the empty space in the footer. |
| group-header |
| Slot for custom rendering of a group header. |
| header.data-table-expand |
| MISSING DESCRIPTION (edit in github ) |
| header.data-table-select |
| Slot to replace the default v-checkbox-btn in header. |
| headers |
| MISSING DESCRIPTION (edit in github ) |
| item |
| Slot to replace the default rendering of a row. |
| item.data-table-expand |
| Slot to replace the default v-icon used when expanding rows. |
| item.data-table-select |
| Slot to replace the default v-checkbox-btn used when selecting rows. |
| loader |
| Slot for custom loader (displayed when loading prop is equal to true). |
| loading |
| Defines content for when loading is true and no items are provided. |
| no-data |
| Defines content for when no items are provided. |
| tbody |
| MISSING DESCRIPTION (edit in github ) |
| tfoot |
| MISSING DESCRIPTION (edit in github ) |
| thead |
| MISSING DESCRIPTION (edit in github ) |
| top |
| Slot to add content above the table. |
| [`header.${string}`] |
| MISSING DESCRIPTION (edit in github ) |
| [`item.${string}`] |
| Slot for custom rendering of a row cell. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $data-table-footer-info-min-width | |
| $data-table-footer-info-padding | |
| $data-table-footer-items-per-page-padding | |
| $data-table-footer-padding | |
| $data-table-footer-pagination-margin-inline-start | |
| $data-table-footer-select-width | |
| $data-table-header-mobile-chip-icon-color | |
| $data-table-header-mobile-chip-icon-color-active | |
| $data-table-header-sort-badge-color | |
| $data-table-header-sort-badge-size | |
| $data-table-loading-opacity | |