diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md index f107ea3e..f6d485de 100644 --- a/docs/content/2.components/table.md +++ b/docs/content/2.components/table.md @@ -285,6 +285,42 @@ componentProps: --- :: + +#### Event Selectable +The `UTable` component provides two key events for handling row selection: + +##### ***@select:all*** +The `@select:all` event is emitted when the header checkbox in a selectable table is toggled. This event returns a boolean value indicating whether all rows are selected (true) or deselected (false). + +##### ***@update:modelValue*** +The `@update:modelValue` event is emitted whenever the selection state changes, including both individual row selection and bulk selection. This event returns an array containing the currently selected rows. + +Here's how to implement both events: + +```vue + + + +``` + + #### Single Select Mode Control how the select function allows only one row to be selected at a time. diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue index cf5dc076..7d666348 100644 --- a/src/runtime/components/data/Table.vue +++ b/src/runtime/components/data/Table.vue @@ -269,7 +269,7 @@ export default defineComponent({ default: false } }, - emits: ['update:modelValue', 'update:sort', 'update:expand'], + emits: ['update:modelValue', 'update:sort', 'update:expand', 'select:all'], setup(props, { emit, attrs: $attrs }) { const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class')) @@ -407,6 +407,7 @@ export default defineComponent({ } else { selected.value = [] } + emit('select:all', checked) } function onChangeCheckbox(checked: boolean, row: TableRow) {