feat(Table): add custom @select:all event (#2581)

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
+<script setup lang="ts">
+const selected = ref([])
+
+const onHandleSelectAll = (isSelected: boolean) => {
+  console.log('All rows selected:', isSelected)
+}
+
+const onUpdateSelection = (selectedRows: any[]) => {
+  console.log('Currently selected rows:', selectedRows)
+}
+</script>
+
+<template>
+  <UTable 
+    v-model="selected" 
+    :rows="people" 
+    @select:all="onHandleSelectAll"
+    @update:modelValue="onUpdateSelection"
+  />
+</template>
+```
+
+
 #### Single Select Mode
 Control how the select function allows only one row to be selected at a time.
 

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) {