mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-24 10:33:50 +08:00
perf(table): fixed code style
修复一些代码检查警告,并且为table的canResize属性添加不兼容场景警告 close: #1070
This commit is contained in:
parent
30c5fc63c8
commit
da12da9d8c
@ -5,3 +5,5 @@ import pageWrapper from './src/PageWrapper.vue';
|
|||||||
|
|
||||||
export const PageFooter = withInstall(pageFooter);
|
export const PageFooter = withInstall(pageFooter);
|
||||||
export const PageWrapper = withInstall(pageWrapper);
|
export const PageWrapper = withInstall(pageWrapper);
|
||||||
|
|
||||||
|
export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { CSSProperties, PropType } from 'vue';
|
import { CSSProperties, PropType, provide } from 'vue';
|
||||||
|
|
||||||
import { defineComponent, computed, watch, ref, unref } from 'vue';
|
import { defineComponent, computed, watch, ref, unref } from 'vue';
|
||||||
import PageFooter from './PageFooter.vue';
|
import PageFooter from './PageFooter.vue';
|
||||||
@ -43,6 +43,7 @@
|
|||||||
import { omit } from 'lodash-es';
|
import { omit } from 'lodash-es';
|
||||||
import { PageHeader } from 'ant-design-vue';
|
import { PageHeader } from 'ant-design-vue';
|
||||||
import { useContentHeight } from '/@/hooks/web/useContentHeight';
|
import { useContentHeight } from '/@/hooks/web/useContentHeight';
|
||||||
|
import { PageWrapperFixedHeightKey } from '..';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'PageWrapper',
|
name: 'PageWrapper',
|
||||||
@ -68,6 +69,11 @@
|
|||||||
const footerRef = ref(null);
|
const footerRef = ref(null);
|
||||||
const { prefixCls } = useDesign('page-wrapper');
|
const { prefixCls } = useDesign('page-wrapper');
|
||||||
|
|
||||||
|
provide(
|
||||||
|
PageWrapperFixedHeightKey,
|
||||||
|
computed(() => props.fixedHeight)
|
||||||
|
);
|
||||||
|
|
||||||
const getIsContentFullHeight = computed(() => {
|
const getIsContentFullHeight = computed(() => {
|
||||||
return props.contentFullHeight;
|
return props.contentFullHeight;
|
||||||
});
|
});
|
||||||
|
@ -39,9 +39,10 @@
|
|||||||
ColumnChangeParam,
|
ColumnChangeParam,
|
||||||
} from './types/table';
|
} from './types/table';
|
||||||
|
|
||||||
import { defineComponent, ref, computed, unref, toRaw } from 'vue';
|
import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue';
|
||||||
import { Table } from 'ant-design-vue';
|
import { Table } from 'ant-design-vue';
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||||
|
import { PageWrapperFixedHeightKey } from '/@/components/Page';
|
||||||
import expandIcon from './components/ExpandIcon';
|
import expandIcon from './components/ExpandIcon';
|
||||||
import HeaderCell from './components/HeaderCell.vue';
|
import HeaderCell from './components/HeaderCell.vue';
|
||||||
import { InnerHandlers } from './types/table';
|
import { InnerHandlers } from './types/table';
|
||||||
@ -64,6 +65,7 @@
|
|||||||
import { omit } from 'lodash-es';
|
import { omit } from 'lodash-es';
|
||||||
import { basicProps } from './props';
|
import { basicProps } from './props';
|
||||||
import { isFunction } from '/@/utils/is';
|
import { isFunction } from '/@/utils/is';
|
||||||
|
import { warn } from '/@/utils/log';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
@ -104,6 +106,13 @@
|
|||||||
return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
|
return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const isFixedHeightPage = inject(PageWrapperFixedHeightKey);
|
||||||
|
watchEffect(() => {
|
||||||
|
unref(isFixedHeightPage) &&
|
||||||
|
props.canResize &&
|
||||||
|
warn("[BasicTable] 'canRize' not worked with PageWrapper while 'fixedHeight' is true");
|
||||||
|
});
|
||||||
|
|
||||||
const { getLoading, setLoading } = useLoading(getProps);
|
const { getLoading, setLoading } = useLoading(getProps);
|
||||||
const {
|
const {
|
||||||
getPaginationInfo,
|
getPaginationInfo,
|
||||||
@ -380,9 +389,9 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-tbody > tr.ant-table-row-selected td {
|
//.ant-table-tbody > tr.ant-table-row-selected td {
|
||||||
//background-color: fade(@primary-color, 8%) !important;
|
//background-color: fade(@primary-color, 8%) !important;
|
||||||
}
|
//}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-pagination {
|
.ant-pagination {
|
||||||
|
@ -21,9 +21,11 @@ export function useTableForm(
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const getFormSlotKeys = computed(() => {
|
const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
|
||||||
const keys = Object.keys(slots);
|
const keys = Object.keys(slots);
|
||||||
return keys.map((item) => (item.startsWith('form-') ? item : null)).filter(Boolean);
|
return keys
|
||||||
|
.map((item) => (item.startsWith('form-') ? item : null))
|
||||||
|
.filter((item) => !!item) as string[];
|
||||||
});
|
});
|
||||||
|
|
||||||
function replaceFormSlotKey(key: string) {
|
function replaceFormSlotKey(key: string) {
|
||||||
|
@ -1,21 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="p-4">
|
<PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
|
||||||
<BasicTable @register="registerTable">
|
<BasicTable @register="registerTable">
|
||||||
<template #toolbar>
|
<template #toolbar>
|
||||||
<a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
|
<a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
|
||||||
<a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
|
<a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
|
||||||
</template>
|
</template>
|
||||||
</BasicTable>
|
</BasicTable>
|
||||||
</div>
|
</PageWrapper>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { BasicTable, useTable } from '/@/components/Table';
|
import { BasicTable, useTable } from '/@/components/Table';
|
||||||
import { getBasicColumns } from './tableData';
|
import { getBasicColumns } from './tableData';
|
||||||
|
import { PageWrapper } from '/@/components/Page';
|
||||||
|
|
||||||
import { demoListApi } from '/@/api/demo/table';
|
import { demoListApi } from '/@/api/demo/table';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { BasicTable },
|
components: { BasicTable, PageWrapper },
|
||||||
setup() {
|
setup() {
|
||||||
const [registerTable, { reload }] = useTable({
|
const [registerTable, { reload }] = useTable({
|
||||||
title: '远程加载示例',
|
title: '远程加载示例',
|
||||||
|
Loading…
Reference in New Issue
Block a user