wip: Table新功能开发中

src/components/Table/src/Table.vue

@@ -1,12 +1,5 @@
 <script lang="tsx">
-import {
+import { ElTable, ElTableColumn, ElPagination, ComponentSize, ElTooltipProps } from 'element-plus'
-  ElTable,
-  ElTableColumn,
-  ElPagination,
-  ComponentSize,
-  ElTooltipProps,
-  ElTooltip
-} from 'element-plus'
 import { defineComponent, PropType, ref, computed, unref, watch, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { setIndex } from './helper'
@@ -14,10 +7,7 @@ import type { TableProps, TableColumn, Pagination, TableSetProps } from './types
 import { set } from 'lodash-es'
 import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
-import { Icon } from '@/components/Icon'
+import TableActions from './components/TableActions.vue'
-import { useI18n } from '@/hooks/web/useI18n'
-
-const { t } = useI18n()
 
 export default defineComponent({
   name: 'Table',
@@ -247,6 +237,10 @@ export default defineComponent({
       emit('refresh')
     }
 
+    const changSize = (size: ComponentSize) => {
+      setProps({ size })
+    }
+
     expose({
       setProps,
       setColumn,
@@ -428,16 +422,7 @@ export default defineComponent({
       return (
         <div v-loading={unref(getProps).loading}>
           {unref(getProps).showAction ? (
-            <div class="text-right">
+            <TableActions onChangSize={changSize} onRefresh={refresh} />
-              <ElTooltip content={t('common.refresh')} placement="top">
-                <Icon
-                  icon="ant-design:sync-outlined"
-                  class="cursor-pointer mr-8px"
-                  hover-color="var(--el-color-primary)"
-                  onClick={refresh}
-                />
-              </ElTooltip>
-            </div>
           ) : null}
           <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
             {{

src/components/Table/src/components/TableActions.vue

@@ -0,0 +1,110 @@
+<script lang="tsx">
+import { defineComponent, unref, computed, ref } from 'vue'
+import {
+  ElTooltip,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ComponentSize,
+  ElPopover,
+  ClickOutside as vClickOutside
+} from 'element-plus'
+import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+const sizeMap = computed(() => appStore.sizeMap)
+
+const { t } = useI18n()
+
+export default defineComponent({
+  name: 'TableActions',
+  directives: {
+    ClickOutside: vClickOutside
+  },
+  emits: ['refresh', 'changSize'],
+  setup(_, { emit }) {
+    const refresh = () => {
+      emit('refresh')
+    }
+
+    const changSize = (size: ComponentSize) => {
+      emit('changSize', size)
+    }
+
+    const popoverRef = ref()
+    const iconRef = ref()
+
+    const onClickOutside = () => {
+      unref(popoverRef)?.popperRef?.delayHide?.()
+    }
+
+    return () => (
+      <>
+        <ElPopover
+          ref={popoverRef.value}
+          virtualRef={iconRef.value}
+          trigger="click"
+          virtualTriggering
+        >
+          <span> Some content </span>
+        </ElPopover>
+        <div class="text-right h-28px flex items-center justify-end">
+          <ElTooltip content={t('common.refresh')} placement="top">
+            <Icon
+              icon="ant-design:sync-outlined"
+              class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
+              onClick={refresh}
+            />
+          </ElTooltip>
+
+          <ElTooltip content={t('common.size')} placement="top">
+            <ElDropdown trigger="click" onCommand={changSize}>
+              {{
+                default: () => {
+                  return (
+                    <Icon
+                      icon="ant-design:column-height-outlined"
+                      class="cursor-pointer mr-8px ml-8px"
+                      hover-color="var(--el-color-primary)"
+                    />
+                  )
+                },
+                dropdown: () => {
+                  return (
+                    <ElDropdownMenu>
+                      {{
+                        default: () => {
+                          return unref(sizeMap).map((v) => {
+                            return (
+                              <ElDropdownItem key={v} command={v}>
+                                {t(`size.${v}`)}
+                              </ElDropdownItem>
+                            )
+                          })
+                        }
+                      }}
+                    </ElDropdownMenu>
+                  )
+                }
+              }}
+            </ElDropdown>
+          </ElTooltip>
+
+          <ElTooltip content={t('common.columnSetting')} placement="top">
+            <Icon
+              ref={iconRef.value}
+              icon="ant-design:setting-outlined"
+              class="cursor-pointer"
+              hoverColor="var(--el-color-primary)"
+              vClickOutside={onClickOutside}
+            />
+          </ElTooltip>
+        </div>
+      </>
+    )
+  }
+})
+</script>

src/locales/en.ts

@@ -42,7 +42,9 @@ export default {
     delNoData: 'Please select the data to delete',
     delSuccess: 'Deleted successfully',
     refresh: 'Refresh',
-    fullscreen: 'Fullscreen'
+    fullscreen: 'Fullscreen',
+    size: 'Size',
+    columnSetting: 'Column setting'
   },
   lock: {
     lockScreen: 'Lock screen',

src/locales/zh-CN.ts

@@ -42,7 +42,9 @@ export default {
     delNoData: '请选择需要删除的数据',
     delSuccess: '删除成功',
     refresh: '刷新',
-    fullscreen: '全屏'
+    fullscreen: '全屏',
+    size: '尺寸',
+    columnSetting: '列设置'
   },
   lock: {
     lockScreen: '锁定屏幕',

vite.config.ts

@@ -43,6 +43,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           libraryName: 'element-plus',
           esModule: true,
           resolveStyle: (name) => {
+            if (name === 'click-outside') {
+              return ''
+            }
             return `element-plus/es/components/${name.substring(3)}/style/css`
           }
         }]