From cdf0a600e505daf429446b8a7968269e1034de04 Mon Sep 17 00:00:00 2001 From: vben Date: Tue, 12 Jan 2021 22:17:31 +0800 Subject: [PATCH] perf: perf table --- .../Button/src/PopConfirmButton.vue | 3 ++- src/components/Table/index.ts | 2 -- .../Table/src/components/TableAction.vue | 21 +++++++++++++++++-- .../src/components/editable/EditableCell.vue | 13 ++++++++++++ .../Table/src/components/editable/helper.ts | 6 +++--- .../Table/src/hooks/useTableScroll.ts | 2 +- src/components/Table/src/style/index.less | 15 ++----------- src/views/demo/page/form/high/PersonTable.vue | 1 - 8 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/components/Button/src/PopConfirmButton.vue b/src/components/Button/src/PopConfirmButton.vue index 99a1ffe2..2a9f633f 100644 --- a/src/components/Button/src/PopConfirmButton.vue +++ b/src/components/Button/src/PopConfirmButton.vue @@ -13,6 +13,7 @@ inheritAttrs: false, components: { Popconfirm, BasicButton }, props: { + size: propTypes.oneOf(['large', 'default', 'small']).def(), enable: propTypes.bool.def(true), okText: propTypes.string, cancelText: propTypes.string, @@ -31,7 +32,7 @@ return popValues; }); return () => { - const Button = h(BasicButton, omit(unref(attrs), 'icon'), extendSlots(slots)); + const Button = h(BasicButton, unref(getBindValues), extendSlots(slots)); if (!props.enable) { return Button; } diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts index 234c8855..05d65fb2 100644 --- a/src/components/Table/index.ts +++ b/src/components/Table/index.ts @@ -2,11 +2,9 @@ import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export { default as BasicTable } from './src/BasicTable.vue'; export { default as TableAction } from './src/components/TableAction.vue'; -// export { default as TableImg } from './src/components/TableImg.vue'; export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue'; export const TableImg = createAsyncComponent(() => import('./src/components/TableImg.vue')); -// export const TableAction = createAsyncComponent(() => import('./src/components/TableAction.vue')); export * from './src/types/table'; export * from './src/types/pagination'; diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue index d064459f..7194ba49 100644 --- a/src/components/Table/src/components/TableAction.vue +++ b/src/components/Table/src/components/TableAction.vue @@ -5,7 +5,10 @@ {{ action.label }} - + @@ -44,17 +47,31 @@ }, setup(props) { const { prefixCls } = useDesign('basic-table-action'); - let table = {}; + let table: Partial = {}; if (!props.outside) { table = useTableContext(); } + // const getSize = computed(() => { + // const size = table?.getSize?.(); + // if (size === 'middle' || !size) { + // return; + // } + + // if (size === 'default') { + // return 'large'; + // } + // return size; + // }); + const getActions = computed(() => { return (props.actions || []).map((action) => { const { popConfirm } = action; + // const size = unref(getSize); return { type: 'link', size: 'small', + // ...(size ? { size } : {}), ...action, ...(popConfirm || {}), onConfirm: popConfirm?.confirm, diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue index 4e3974f3..de8b71cb 100644 --- a/src/components/Table/src/components/editable/EditableCell.vue +++ b/src/components/Table/src/components/editable/EditableCell.vue @@ -85,6 +85,18 @@ return unref(ruleMessage) && unref(ruleVisible); }); + // const getSize = computed(() => { + // const size = table?.getSize?.(); + // if (size === 'middle' || !size) { + // return; + // } + + // if (size === 'default') { + // return 'large'; + // } + // return size; + // }); + const getIsCheckComp = computed(() => { const component = unref(getComponent); return ['Checkbox', 'Switch'].includes(component); @@ -300,6 +312,7 @@ handleOptionsChange, getWrapperStyle, getRowEditable, + // getSize, }; }, }); diff --git a/src/components/Table/src/components/editable/helper.ts b/src/components/Table/src/components/editable/helper.ts index 4abbadfe..d2f60622 100644 --- a/src/components/Table/src/components/editable/helper.ts +++ b/src/components/Table/src/components/editable/helper.ts @@ -8,10 +8,10 @@ const { t } = useI18n(); */ export function createPlaceholderMessage(component: ComponentType) { if (component.includes('Input')) { - return t('component.form.input'); + return t('common.inputText'); } if (component.includes('Picker')) { - return t('component.form.choose'); + return t('common.chooseText'); } if ( @@ -20,7 +20,7 @@ export function createPlaceholderMessage(component: ComponentType) { component.includes('Radio') || component.includes('Switch') ) { - return t('component.form.choose'); + return t('common.chooseText'); } return ''; } diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts index 0c001164..83851b49 100644 --- a/src/components/Table/src/hooks/useTableScroll.ts +++ b/src/components/Table/src/hooks/useTableScroll.ts @@ -143,7 +143,7 @@ export function useTableScroll( const table = unref(tableElRef); const tableWidth = table?.$el?.offsetWidth ?? 0; - return tableWidth > width ? tableWidth - 24 : width; + return tableWidth > width ? '100%' : width; }); const getScrollRef = computed(() => { diff --git a/src/components/Table/src/style/index.less b/src/components/Table/src/style/index.less index 74a77a72..17e7d622 100644 --- a/src/components/Table/src/style/index.less +++ b/src/components/Table/src/style/index.less @@ -51,7 +51,7 @@ // .ant-table { width: 100%; - overflow-x: auto; + overflow-x: hidden; border: none; &-title { @@ -107,22 +107,11 @@ border: 1px solid @border-color !important; } - .ant-table td { - white-space: nowrap; - } - .ant-table-tbody > tr > td, .ant-table-tbody > tr > th, .ant-table-thead > tr > td, .ant-table-thead > tr > th { - white-space: pre; - } - - .ant-table-tbody > tr > td > span, - .ant-table-tbody > tr > th > span, - .ant-table-thead > tr > td > span, - .ant-table-thead > tr > th > span { - display: block; + white-space: nowrap; } .ant-table-row-cell-last { diff --git a/src/views/demo/page/form/high/PersonTable.vue b/src/views/demo/page/form/high/PersonTable.vue index 3f341409..5f7fcef4 100644 --- a/src/views/demo/page/form/high/PersonTable.vue +++ b/src/views/demo/page/form/high/PersonTable.vue @@ -30,7 +30,6 @@ title: '工号', dataIndex: 'no', editRow: true, - // customRender: renderEditableRow({ dataIndex: 'no', placeholder: '请输入工号' }), }, {