VDataTableVirtual 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 used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted. | ||
| 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 used by the component. | ||
| disable-sort | ||
| Toggles rendering of sort button. | ||
| 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. | ||
| fixed-footer | ||
| Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table. | ||
| fixed-header | ||
| Use the fixed-header prop together with the height prop to fix the header to the top of the table. | ||
| group-by | ||
| Defines the grouping of the table items. | ||
| header-props | ||
| MISSING DESCRIPTION (edit in github ) | ||
| headers | ||
| An array of objects that each describe a header column. | ||
| height | ||
| Use the height prop to set the height of the table. | ||
| hide-default-body | ||
| MISSING DESCRIPTION (edit in github ) | ||
| hide-default-footer | ||
| MISSING DESCRIPTION (edit in github ) | ||
| hide-default-header | ||
| MISSING DESCRIPTION (edit in github ) | ||
| 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 | ||
| Will add a hover effect to a table’s row when the mouse is over it. | ||
| item-height | ||
| Height in pixels of each item to display. | ||
| 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. | ||
| 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 | ||
| Allows sorting by multiple columns. | ||
| must-sort | ||
| Forces sorting on the column(s). | ||
| no-data-text | ||
| Text shown when no items are provided to the component. | ||
| no-filter | ||
| Disables all item filtering. | ||
| 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-expand | ||
| Shows the expand icon. | ||
| show-select | ||
| Shows the column with checkboxes for selecting items in the list. | ||
| sort-asc-icon | ||
| Icon used for ascending sort button. | ||
| sort-by | ||
| Array of column keys and sort orders that determines the sort order of the table. | ||
| 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: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:modelValue | |
| Emits when the component’s model changes. | |
| update:options | |
| Emits when one of the options properties is updated. | |
| update:sortBy | |
| Emits when the sort-by property of the options prop is updated. | |
插槽
| body.append |
| MISSING DESCRIPTION (edit in github ) |
| body.prepend |
| MISSING DESCRIPTION (edit in github ) |
| bottom |
| Slot to add content below the table. |
| 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. |
| expanded-row |
| Slot for custom rendering of an expanded row. |
| group-header |
| Slot for custom rendering of a group header. |
| header.data-table-expand |
| MISSING DESCRIPTION (edit in github ) |
| header.data-table-select |
| MISSING DESCRIPTION (edit in github ) |
| headers |
| Slot to replace the default rendering of the <thead> element. |
| 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 checkbox 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. |
| 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. |