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 }, columns: { type: Array as PropType<ColumnsType>, default: undefined },
rowKey: { type: [String, Function] as PropType<TableProps['rowKey']>, default: undefined }, rowKey: { type: [String, Function] as PropType<TableProps['rowKey']>, default: undefined },
tableLayout: { type: String as PropType<TableProps['tableLayout']>, 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 }, title: { type: Function as PropType<TableProps['title']>, default: undefined },
footer: { type: Function as PropType<TableProps['footer']>, default: undefined }, footer: { type: Function as PropType<TableProps['footer']>, default: undefined },
id: { type: String as PropType<TableProps['id']>, 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> <template>
<a-table :columns="columns" :data-source="data"> <a-table :columns="columns" :data-source="data">
<template #action> <template #bodyCell="{ column, text }">
<a>Delete</a> <template v-if="column.key === 'action'">
<a>Delete</a>
</template>
<template v-else>{{ text }}</template>
</template> </template>
<template #expandedRowRender="{ record }"> <template #expandedRowRender="{ record }">
<p style="margin: 0"> <p style="margin: 0">
@ -34,7 +37,7 @@ const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' }, { title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', dataIndex: '', key: 'x', slots: { customRender: 'action' } }, { title: 'Action', key: 'action' },
]; ];
const data = [ 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> <template>
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }"> <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }">
<template #action> <template #bodyCell="{ column, text }">
<a>action</a> <template v-if="column.key === 'operation'">
<a>action</a>
</template>
<template v-else>{{ text }}</template>
</template> </template>
</a-table> </a-table>
</template> </template>
@ -49,7 +52,6 @@ const columns = [
key: 'operation', key: 'operation',
fixed: 'right', fixed: 'right',
width: 100, 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> <template>
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1300 }"> <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300 }">
<template #action> <template #bodyCell="{ column, text }">
<a>action</a> <template v-if="column.key === 'operation'">
<a>action</a>
</template>
<template v-else>{{ text }}</template>
</template> </template>
</a-table> </a-table>
</template> </template>
@ -50,7 +53,6 @@ const columns = [
key: 'operation', key: 'operation',
fixed: 'right', fixed: 'right',
width: 100, 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" /> <a-table :columns="columns" :data-source="data" @change="onChange" />
</template> </template>
<script lang="ts"> <script lang="ts">
import type { TableColumnType, TableProps } from 'ant-design-vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
type TableDataType = { type TableDataType = {
@ -37,35 +38,7 @@ type TableDataType = {
address: string; address: string;
}; };
type PaginationType = { const columns: TableColumnType<TableDataType>[] = [
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[] = [
{ {
title: 'Name', title: 'Name',
dataIndex: 'name', dataIndex: 'name',
@ -153,7 +126,7 @@ const data: TableDataType[] = [
]; ];
export default defineComponent({ export default defineComponent({
setup() { setup() {
const onChange = (pagination: PaginationType, filters: FilterType[], sorter: ColumnType) => { const onChange: TableProps<TableDataType>['onChange'] = (pagination, filters, sorter) => {
console.log('params', pagination, filters, sorter); console.log('params', pagination, filters, sorter);
}; };
return { return {

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

@ -19,34 +19,40 @@ Showing more detailed info of every row.
<template> <template>
<a-table :columns="columns" :data-source="data" class="components-table-demo-nested"> <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
<template #operation> <template #bodyCell="{ column, text }">
<a>Publish</a> <template v-if="column.key === 'operation'">
<a>Publish</a>
</template>
<template v-else>{{ text }}</template>
</template> </template>
<template #expandedRowRender> <template #expandedRowRender>
<a-table :columns="innerColumns" :data-source="innerData" :pagination="false"> <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
<template #status> <template #bodyCell="{ column, text }">
<span> <template v-if="column.key === 'state'">
<a-badge status="success" /> <span>
Finished <a-badge status="success" />
</span> Finished
</template> </span>
<template #operation> </template>
<span class="table-operation"> <template v-else-if="column.key === 'operation'">
<a>Pause</a> <span class="table-operation">
<a>Stop</a> <a>Pause</a>
<a-dropdown> <a>Stop</a>
<template #overlay> <a-dropdown>
<a-menu> <template #overlay>
<a-menu-item>Action 1</a-menu-item> <a-menu>
<a-menu-item>Action 2</a-menu-item> <a-menu-item>Action 1</a-menu-item>
</a-menu> <a-menu-item>Action 2</a-menu-item>
</template> </a-menu>
<a> </template>
More <a>
<down-outlined /> More
</a> <down-outlined />
</a-dropdown> </a>
</span> </a-dropdown>
</span>
</template>
<template v-else>{{ text }}</template>
</template> </template>
</a-table> </a-table>
</template> </template>
@ -63,7 +69,7 @@ const columns = [
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' }, { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' }, { title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' }, { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', slots: { customRender: 'operation' } }, { title: 'Action', key: 'operation' },
]; ];
interface DataItem { interface DataItem {
@ -80,7 +86,7 @@ const data: DataItem[] = [];
for (let i = 0; i < 3; ++i) { for (let i = 0; i < 3; ++i) {
data.push({ data.push({
key: i, key: i,
name: 'Screem', name: `Screem ${i + 1}`,
platform: 'iOS', platform: 'iOS',
version: '10.3.4.5654', version: '10.3.4.5654',
upgradeNum: 500, upgradeNum: 500,
@ -92,13 +98,12 @@ for (let i = 0; i < 3; ++i) {
const innerColumns = [ const innerColumns = [
{ title: 'Date', dataIndex: 'date', key: 'date' }, { title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' }, { 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: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ {
title: 'Action', title: 'Action',
dataIndex: 'operation', dataIndex: 'operation',
key: 'operation', key: 'operation',
slots: { customRender: 'operation' },
}, },
]; ];
@ -114,7 +119,7 @@ for (let i = 0; i < 3; ++i) {
innerData.push({ innerData.push({
key: i, key: i,
date: '2014-12-24 23:12:00', date: '2014-12-24 23:12:00',
name: 'This is production name', name: `This is production name ${i + 1}`,
upgradeNum: 'Upgraded: 56', 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> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue'; import { computed, defineComponent, ref } from 'vue';
import { TableState, TableStateFilters } from 'ant-design-vue/es/table/interface'; import type { TableColumnType, TableProps } from 'ant-design-vue';
type Pagination = TableState['pagination'];
interface DataItem { interface DataItem {
key: string; key: string;
@ -78,7 +76,7 @@ export default defineComponent({
const filteredInfo = ref(); const filteredInfo = ref();
const sortedInfo = ref(); const sortedInfo = ref();
const columns = computed(() => { const columns = computed<TableColumnType[]>(() => {
const filtered = filteredInfo.value || {}; const filtered = filteredInfo.value || {};
const sorted = sortedInfo.value || {}; const sorted = sortedInfo.value || {};
return [ 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); console.log('Various parameters', pagination, filters, sorter);
filteredInfo.value = filters; filteredInfo.value = filters;
sortedInfo.value = sorter; sortedInfo.value = sorter;

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

@ -20,14 +20,14 @@ Use `rowClassName` Customize the table with Striped.
size="middle" size="middle"
:columns="columns" :columns="columns"
:data-source="data" :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 <a-table
class="ant-table-striped" class="ant-table-striped"
size="middle" size="middle"
:columns="columns" :columns="columns"
:data-source="data" :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 bordered
/> />
</template> </template>

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

@ -15,6 +15,7 @@ import type {
} from '../interface'; } from '../interface';
import { getPathValue, validateValue } from '../utils/valueUtil'; import { getPathValue, validateValue } from '../utils/valueUtil';
import { useInjectSlots } from '../../table/context'; import { useInjectSlots } from '../../table/context';
import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
function isRenderCell<RecordType = DefaultRecordType>( function isRenderCell<RecordType = DefaultRecordType>(
data: RenderedCell<RecordType>, 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( childNode = flattenChildren(
contextSlots.value.bodyCell({ contextSlots.value.bodyCell({
text: value, text: value,

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

@ -14,6 +14,7 @@ import {
} from 'vue'; } from 'vue';
import { useInjectTable } from '../context/TableContext'; import { useInjectTable } from '../context/TableContext';
import classNames from '../../_util/classNames'; 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>) { function useColumnWidth(colWidthsRef: Ref<readonly number[]>, columCountRef: Ref<number>) {
return computed(() => { return computed(() => {
@ -77,13 +78,14 @@ export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
e.preventDefault(); e.preventDefault();
} }
} }
const wheelEvent = ref();
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
scrollRef.value?.addEventListener('wheel', onWheel); wheelEvent.value = addEventListenerWrap(scrollRef.value, 'wheel', onWheel);
}); });
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
scrollRef.value?.removeEventListener('wheel', onWheel); wheelEvent.value?.remove();
}); });
// Check if all flattenColumns has width // 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({ export default defineComponent({
name: 'Footer', name: 'Footer',
props: ['stickyOffsets', 'flattenColumns'], props: ['stickyOffsets', 'flattenColumns'],
inheritAttrs: false,
setup(props, { slots }) { setup(props, { slots }) {
const tableContext = useInjectTable(); const tableContext = useInjectTable();
useProvideSummary( useProvideSummary(

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

@ -390,11 +390,15 @@ export default defineComponent<TableProps>({
if (!target) { if (!target) {
return; return;
} }
if (typeof target === 'function') { if (typeof target === 'function') {
target(scrollLeft); 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 // 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'; import supportsPassive from '../../_util/supportsPassive';
export default function addEventListenerWrap(target, eventType, cb, option) { export default function addEventListenerWrap(target, eventType, cb, option) {
if (target.addEventListener) { if (target && target.addEventListener) {
let opt = option; let opt = option;
if ( if (
opt === undefined && opt === undefined &&
@ -14,7 +14,7 @@ export default function addEventListenerWrap(target, eventType, cb, option) {
} }
return { return {
remove: () => { remove: () => {
if (target.removeEventListener) { if (target && target.removeEventListener) {
target.removeEventListener(eventType, cb); target.removeEventListener(eventType, cb);
} }
}, },

2
site/debugger/index.tsx
View File

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