From c589edd960b23ad0c8b56d2c7880b61014114d45 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Sat, 13 Aug 2022 09:03:52 +0800
Subject: [PATCH] style: perfect tableDemo

---
 src/components/Table/index.ts               | 2 ++
 src/components/Table/src/Table.vue          | 3 ++-
 src/hooks/web/useTable.ts                   | 2 +-
 src/locales/en.ts                           | 3 ++-
 src/locales/zh-CN.ts                        | 3 ++-
 src/views/Components/Table/RefTable.vue     | 6 ++++++
 src/views/Components/Table/UseTableDemo.vue | 8 +++++++-
 7 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 59847e9..d734e21 100644
--- a/src/components/Table/index.ts
+++ b/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 }
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index e93f67f..35905cb 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -99,7 +99,8 @@ export default defineComponent({
     expose({
       setProps,
       setColumn,
-      selections
+      selections,
+      elTableRef
     })
 
     const pagination = computed(() => {
diff --git a/src/hooks/web/useTable.ts b/src/hooks/web/useTable.ts
index cfcc73d..9a4c1b4 100644
--- a/src/hooks/web/useTable.ts
+++ b/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 () => {
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 68f706d..6f6ec58 100644
--- a/src/locales/en.ts
+++ b/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',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index a33a53f..7600880 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -374,7 +374,8 @@ export default {
     showExpandedRows: '显示展开行',
     hiddenExpandedRows: '隐藏展开行',
     changeTitle: '修改标题',
-    header: '头部'
+    header: '头部',
+    selectAllNone: '全选/全不选'
   },
   richText: {
     richText: '富文本',
diff --git a/src/views/Components/Table/RefTable.vue b/src/views/Components/Table/RefTable.vue
index c330121..3874d49 100644
--- a/src/views/Components/Table/RefTable.vue
+++ b/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
diff --git a/src/views/Components/Table/UseTableDemo.vue b/src/views/Components/Table/UseTableDemo.vue
index 03a56f0..9df25f1 100644
--- a/src/views/Components/Table/UseTableDemo.vue
+++ b/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