style: perfect tableDemo

src/components/Table/index.ts

@@ -1,9 +1,11 @@
 import Table from './src/Table.vue'
+import { ElTable } from 'element-plus'
 
 export interface TableExpose {
   setProps: (props: Recordable) => void
   setColumn: (columnProps: TableSetPropsType[]) => void
   selections: Recordable[]
+  elTableRef: ComponentRef<typeof ElTable>
 }
 
 export { Table }

src/components/Table/src/Table.vue

@@ -99,7 +99,8 @@ export default defineComponent({
     expose({
       setProps,
       setColumn,
-      selections
+      selections,
+      elTableRef
     })
 
     const pagination = computed(() => {

src/hooks/web/useTable.ts

@@ -89,7 +89,7 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
 
   const register = (ref: typeof Table & TableExpose, elRef: ComponentRef<typeof ElTable>) => {
     tableRef.value = ref
-    elTableRef.value = elRef
+    elTableRef.value = unref(elRef)
   }
 
   const getTable = async () => {

src/locales/en.ts

@@ -377,7 +377,8 @@ export default {
     showExpandedRows: 'Show expanded rows',
     hiddenExpandedRows: 'Hidden expanded rows',
     changeTitle: 'Change title',
-    header: 'Header'
+    header: 'Header',
+    selectAllNone: 'Select all / none'
   },
   richText: {
     richText: 'Rich text',

src/locales/zh-CN.ts

@@ -374,7 +374,8 @@ export default {
     showExpandedRows: '显示展开行',
     hiddenExpandedRows: '隐藏展开行',
     changeTitle: '修改标题',
-    header: '头部'
+    header: '头部',
+    selectAllNone: '全选/全不选'
   },
   richText: {
     richText: '富文本',

src/views/Components/Table/RefTable.vue

@@ -125,6 +125,10 @@ const showExpandedRows = (show: boolean) => {
     expand: show
   })
 }
+
+const selectAllNone = () => {
+  unref(tableRef)?.elTableRef?.toggleAllSelection()
+}
 </script>
 
 <template>
@@ -146,6 +150,8 @@ const showExpandedRows = (show: boolean) => {
 
     <ElButton @click="showExpandedRows(true)">{{ t('tableDemo.showExpandedRows') }}</ElButton>
     <ElButton @click="showExpandedRows(false)">{{ t('tableDemo.hiddenExpandedRows') }}</ElButton>
+
+    <ElButton @click="selectAllNone">{{ t('tableDemo.selectAllNone') }}</ElButton>
   </ContentWrap>
   <ContentWrap :title="`RefTable ${t('tableDemo.example')}`">
     <Table

src/views/Components/Table/UseTableDemo.vue

@@ -8,7 +8,7 @@ import { ref, h, reactive, unref } from 'vue'
 import { ElTag, ElButton } from 'element-plus'
 import { useTable } from '@/hooks/web/useTable'
 
-const { register, tableObject, methods } = useTable<TableData>({
+const { register, tableObject, methods, elTableRef } = useTable<TableData>({
   getListApi: getTableListApi,
   response: {
     list: 'list',
@@ -124,6 +124,10 @@ const showExpandedRows = (show: boolean) => {
     expand: show
   })
 }
+
+const selectAllNone = () => {
+  unref(elTableRef)?.toggleAllSelection()
+}
 </script>
 
 <template>
@@ -145,6 +149,8 @@ const showExpandedRows = (show: boolean) => {
 
     <ElButton @click="showExpandedRows(true)">{{ t('tableDemo.showExpandedRows') }}</ElButton>
     <ElButton @click="showExpandedRows(false)">{{ t('tableDemo.hiddenExpandedRows') }}</ElButton>
+
+    <ElButton @click="selectAllNone">{{ t('tableDemo.selectAllNone') }}</ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseTable ${t('tableDemo.example')}`">
     <Table