github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: table

pull/4639/head
tangjinzhou 2021-09-09 16:56:56 +08:00
parent fdf772adf4
commit 6e3e52bb77
14 changed files with 84 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/table/Table.tsx
View File

@ -114,7 +114,10 @@ export const tableProps = () => {
columns: { type: Array as PropType<ColumnsType>, default: undefined },
rowKey: { type: [String, Function] as PropType<TableProps['rowKey']>, default: undefined },
tableLayout: { type: String as PropType<TableProps['tableLayout']>, default: undefined },
rowClassName: { type: String as PropType<TableProps['rowClassName']>, default: undefined },
rowClassName: {
type: [String, Function] as PropType<TableProps['rowClassName']>,
default: undefined,
},
title: { type: Function as PropType<TableProps['title']>, default: undefined },
footer: { type: Function as PropType<TableProps['footer']>, default: undefined },
id: { type: String as PropType<TableProps['id']>, default: undefined },

9
components/table/demo/expand.vue
View File

@ -18,8 +18,11 @@ When there's too much information to show and the table can't display all at onc
<template>
<a-table :columns="columns" :data-source="data">
<template #action>
<a>Delete</a>
<template #bodyCell="{ column, text }">
<template v-if="column.key === 'action'">
<a>Delete</a>
</template>
<template v-else>{{ text }}</template>
</template>
<template #expandedRowRender="{ record }">
<p style="margin: 0">
@ -34,7 +37,7 @@ const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', dataIndex: '', key: 'x', slots: { customRender: 'action' } },
{ title: 'Action', key: 'action' },
];
const data = [

8
components/table/demo/fixed-columns-header.vue
View File

@ -25,8 +25,11 @@ A Solution for displaying large amounts of data with long columns.
<template>
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
<template #action>
<a>action</a>
<template #bodyCell="{ column, text }">
<template v-if="column.key === 'operation'">
<a>action</a>
</template>
<template v-else>{{ text }}</template>
</template>
</a-table>
</template>
@ -49,7 +52,6 @@ const columns = [
key: 'operation',
fixed: 'right',
width: 100,
slots: { customRender: 'action' },
},
];

8
components/table/demo/fixed-columns.vue
View File

@ -26,8 +26,11 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
<template>
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1300 }">
<template #action>
<a>action</a>
<template #bodyCell="{ column, text }">
<template v-if="column.key === 'operation'">
<a>action</a>
</template>
<template v-else>{{ text }}</template>
</template>
</a-table>
</template>
@ -50,7 +53,6 @@ const columns = [
key: 'operation',
fixed: 'right',
width: 100,
slots: { customRender: 'action' },
},
];

33
components/table/demo/head.vue
View File

@ -28,6 +28,7 @@ If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `
<a-table :columns="columns" :data-source="data" @change="onChange" />
</template>
<script lang="ts">
import type { TableColumnType, TableProps } from 'ant-design-vue';
import { defineComponent } from 'vue';
type TableDataType = {
@ -37,35 +38,7 @@ type TableDataType = {
address: string;
};
type PaginationType = {
current: number;
pageSize: number;
};
type FilterType = {
name: string;
address: string;
};
type ColumnType = {
title: string;
dataIndex: string;
filters?: {
text: string;
value: string;
children?: {
text: string;
value: string;
}[];
}[];
onFilter?: (value: string, record: TableDataType) => boolean;
sorter?: (a: TableDataType, b: TableDataType) => number;
sortDirections?: string[];
defaultSortOrder?: string;
filterMultiple?: string[] | boolean;
};
const columns: ColumnType[] = [
const columns: TableColumnType<TableDataType>[] = [
{
title: 'Name',
dataIndex: 'name',
@ -153,7 +126,7 @@ const data: TableDataType[] = [
];
export default defineComponent({
setup() {
const onChange = (pagination: PaginationType, filters: FilterType[], sorter: ColumnType) => {
const onChange: TableProps<TableDataType>['onChange'] = (pagination, filters, sorter) => {
console.log('params', pagination, filters, sorter);
};
return {

65
components/table/demo/nested-table.vue
View File

@ -19,34 +19,40 @@ Showing more detailed info of every row.
<template>
<a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
<template #operation>
<a>Publish</a>
<template #bodyCell="{ column, text }">
<template v-if="column.key === 'operation'">
<a>Publish</a>
</template>
<template v-else>{{ text }}</template>
</template>
<template #expandedRowRender>
<a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
<template #status>
<span>
<a-badge status="success" />
Finished
</span>
</template>
<template #operation>
<span class="table-operation">
<a>Pause</a>
<a>Stop</a>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item>Action 1</a-menu-item>
<a-menu-item>Action 2</a-menu-item>
</a-menu>
</template>
<a>
More
<down-outlined />
</a>
</a-dropdown>
</span>
<template #bodyCell="{ column, text }">
<template v-if="column.key === 'state'">
<span>
<a-badge status="success" />
Finished
</span>
</template>
<template v-else-if="column.key === 'operation'">
<span class="table-operation">
<a>Pause</a>
<a>Stop</a>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item>Action 1</a-menu-item>
<a-menu-item>Action 2</a-menu-item>
</a-menu>
</template>
<a>
More
<down-outlined />
</a>
</a-dropdown>
</span>
</template>
<template v-else>{{ text }}</template>
</template>
</a-table>
</template>
@ -63,7 +69,7 @@ const columns = [
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', slots: { customRender: 'operation' } },
{ title: 'Action', key: 'operation' },
];
interface DataItem {
@ -80,7 +86,7 @@ const data: DataItem[] = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
name: `Screem ${i + 1}`,
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
@ -92,13 +98,12 @@ for (let i = 0; i < 3; ++i) {
const innerColumns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Status', key: 'state', slots: { customRender: 'status' } },
{ title: 'Status', key: 'state' },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
slots: { customRender: 'operation' },
},
];
@ -114,7 +119,7 @@ for (let i = 0; i < 3; ++i) {
innerData.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
name: `This is production name ${i + 1}`,
upgradeNum: 'Upgraded: 56',
});
}

8
components/table/demo/reset-filter.vue
View File

@ -35,9 +35,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { TableState, TableStateFilters } from 'ant-design-vue/es/table/interface';
type Pagination = TableState['pagination'];
import type { TableColumnType, TableProps } from 'ant-design-vue';
interface DataItem {
key: string;
@ -78,7 +76,7 @@ export default defineComponent({
const filteredInfo = ref();
const sortedInfo = ref();
const columns = computed(() => {
const columns = computed<TableColumnType[]>(() => {
const filtered = filteredInfo.value || {};
const sorted = sortedInfo.value || {};
return [
@ -120,7 +118,7 @@ export default defineComponent({
];
});
const handleChange = (pagination: Pagination, filters: TableStateFilters, sorter: any) => {
const handleChange: TableProps['onChange'] = (pagination, filters, sorter) => {
console.log('Various parameters', pagination, filters, sorter);
filteredInfo.value = filters;
sortedInfo.value = sorter;

4
components/table/demo/stripe.vue
View File

@ -20,14 +20,14 @@ Use `rowClassName` Customize the table with Striped.
size="middle"
:columns="columns"
:data-source="data"
:row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
/>
<a-table
class="ant-table-striped"
size="middle"
:columns="columns"
:data-source="data"
:row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
bordered
/>
</template>

8
components/vc-table/Cell/index.tsx
View File

@ -15,6 +15,7 @@ import type {
} from '../interface';
import { getPathValue, validateValue } from '../utils/valueUtil';
import { useInjectSlots } from '../../table/context';
import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
function isRenderCell<RecordType = DefaultRecordType>(
data: RenderedCell<RecordType>,
@ -141,7 +142,12 @@ export default defineComponent<CellProps>({
}
}
if (cellType === 'body' && contextSlots.value.bodyCell && !column.slots?.customRender) {
if (
!(INTERNAL_COL_DEFINE in column) &&
cellType === 'body' &&
contextSlots.value.bodyCell &&
!column.slots?.customRender
) {
childNode = flattenChildren(
contextSlots.value.bodyCell({
text: value,

6
components/vc-table/FixedHolder/index.tsx
View File

@ -14,6 +14,7 @@ import {
} from 'vue';
import { useInjectTable } from '../context/TableContext';
import classNames from '../../_util/classNames';
import addEventListenerWrap from 'ant-design-vue/es/vc-util/Dom/addEventListener';
function useColumnWidth(colWidthsRef: Ref<readonly number[]>, columCountRef: Ref<number>) {
return computed(() => {
@ -77,13 +78,14 @@ export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
e.preventDefault();
}
}
const wheelEvent = ref();
onMounted(() => {
nextTick(() => {
scrollRef.value?.addEventListener('wheel', onWheel);
wheelEvent.value = addEventListenerWrap(scrollRef.value, 'wheel', onWheel);
});
});
onBeforeUnmount(() => {
scrollRef.value?.removeEventListener('wheel', onWheel);
wheelEvent.value?.remove();
});
// Check if all flattenColumns has width

1
components/vc-table/Footer/index.tsx
View File

@ -13,6 +13,7 @@ export interface FooterProps<RecordType = DefaultRecordType> {
export default defineComponent({
name: 'Footer',
props: ['stickyOffsets', 'flattenColumns'],
inheritAttrs: false,
setup(props, { slots }) {
const tableContext = useInjectTable();
useProvideSummary(

8
components/vc-table/Table.tsx
View File

@ -390,11 +390,15 @@ export default defineComponent<TableProps>({
if (!target) {
return;
}
if (typeof target === 'function') {
target(scrollLeft);
} else if (target.scrollLeft !== scrollLeft) {
return;
}
const domTarget = (target as any).$el || target;
if (domTarget.scrollLeft !== scrollLeft) {
// eslint-disable-next-line no-param-reassign
target.scrollLeft = scrollLeft;
domTarget.scrollLeft = scrollLeft;
}
}

4
components/vc-util/Dom/addEventListener.js
View File

@ -1,7 +1,7 @@
import supportsPassive from '../../_util/supportsPassive';
export default function addEventListenerWrap(target, eventType, cb, option) {
if (target.addEventListener) {
if (target && target.addEventListener) {
let opt = option;
if (
opt === undefined &&
@ -14,7 +14,7 @@ export default function addEventListenerWrap(target, eventType, cb, option) {
}
return {
remove: () => {
if (target.removeEventListener) {
if (target && target.removeEventListener) {
target.removeEventListener(eventType, cb);
}
},

2
site/debugger/index.tsx
View File

@ -1,5 +1,5 @@
// debugger tsx
import Demo from '../../components/table/demo/expand-children.vue';
import Demo from '../../components/table/demo/template.vue';
export default {
render() {