VDataTableServer 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-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. | ||
| 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 | ||
| 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-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-length | ||
| Number of all items. | ||
| items-per-page | ||
| The number of items to display on each 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 | ||
| Allows sorting by multiple columns. | ||
| must-sort | ||
| Forces sorting on the column(s). | ||
| next-icon | ||
| Next icon. | ||
| next-page-label | ||
| Label for next page. | ||
| no-data-text | ||
| Text shown when no items are provided to the component. | ||
| 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 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: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 sort-by property of the options prop is updated. | |
插槽
| body |
| Slot to replace the default rendering of the <tbody> element. |
| 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. |
| 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 |
| 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. |
| tbody |
| Slot to replace the default rendering of the <tbody> element. |
| tfoot |
| Slot to replace the default rendering of the <tfoot> element. |
| thead |
| Slot to replace the default rendering of the <thead> element. |
| 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. |