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

feat: table add expandColumnTitle slot

pull/6285/head
tangjinzhou 2023-02-17 09:49:21 +08:00
parent a6a270b44a
commit adec5211f1
4 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/table/Table.tsx
View File

@ -205,6 +205,7 @@ const InteralTable = defineComponent<
'headerCell', 'headerCell',
'customFilterIcon', 'customFilterIcon',
'customFilterDropdown', 'customFilterDropdown',
'expandColumnTitle',
], ],
setup(props, { attrs, slots, expose, emit }) { setup(props, { attrs, slots, expose, emit }) {
devWarning( devWarning(

1
components/table/context.ts
View File

@ -9,6 +9,7 @@ export type ContextSlots = {
footer?: (...args: any[]) => any; footer?: (...args: any[]) => any;
summary?: (...args: any[]) => any; summary?: (...args: any[]) => any;
bodyCell?: (...args: any[]) => any; bodyCell?: (...args: any[]) => any;
expandColumnTitle?: (...args: any[]) => any;
headerCell?: (...args: any[]) => any; headerCell?: (...args: any[]) => any;
customFilterIcon?: (...args: any[]) => any; customFilterIcon?: (...args: any[]) => any;
customFilterDropdown?: (...args: any[]) => any; customFilterDropdown?: (...args: any[]) => any;

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

@ -17,7 +17,7 @@ When there's too much information to show and the table can't display all at onc
</docs> </docs>
<template> <template>
<a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }"> <a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }" :expand-column-width="100">
<template #bodyCell="{ column }"> <template #bodyCell="{ column }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a>Delete</a> <a>Delete</a>
@ -28,6 +28,9 @@ When there's too much information to show and the table can't display all at onc
{{ record.description }} {{ record.description }}
</p> </p>
</template> </template>
<template #expandColumnTitle>
<span style="color: red">More</span>
</template>
</a-table> </a-table>
</template> </template>
<script lang="ts"> <script lang="ts">

6
components/vc-table/hooks/useColumns.tsx
View File

@ -1,6 +1,6 @@
import { warning } from '../../vc-util/warning'; import { warning } from '../../vc-util/warning';
import type { ComputedRef, Ref } from 'vue'; import type { ComputedRef, Ref } from 'vue';
import { computed, watchEffect } from 'vue'; import { renderSlot, computed, watchEffect } from 'vue';
import type { import type {
ColumnsType, ColumnsType,
ColumnType, ColumnType,
@ -13,6 +13,7 @@ import type {
} from '../interface'; } from '../interface';
import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil'; import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
import { EXPAND_COLUMN } from '../constant'; import { EXPAND_COLUMN } from '../constant';
import { useInjectSlots } from '../../table/context';
function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] { function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
return columns.reduce((list, column) => { return columns.reduce((list, column) => {
@ -119,6 +120,7 @@ function useColumns<RecordType>(
}, },
transformColumns: Ref<(columns: ColumnsType<RecordType>) => ColumnsType<RecordType>>, transformColumns: Ref<(columns: ColumnsType<RecordType>) => ColumnsType<RecordType>>,
): [ComputedRef<ColumnsType<RecordType>>, ComputedRef<readonly ColumnType<RecordType>[]>] { ): [ComputedRef<ColumnsType<RecordType>>, ComputedRef<readonly ColumnType<RecordType>[]>] {
const contextSlots = useInjectSlots();
// Add expand column // Add expand column
const withExpandColumns = computed<ColumnsType<RecordType>>(() => { const withExpandColumns = computed<ColumnsType<RecordType>>(() => {
if (expandable.value) { if (expandable.value) {
@ -177,7 +179,7 @@ function useColumns<RecordType>(
class: `${prefixCls.value}-expand-icon-col`, class: `${prefixCls.value}-expand-icon-col`,
columnType: 'EXPAND_COLUMN', columnType: 'EXPAND_COLUMN',
}, },
title: '', title: renderSlot(contextSlots.value, 'expandColumnTitle', {}, () => ['']),
fixed: fixedColumn, fixed: fixedColumn,
class: `${prefixCls.value}-row-expand-icon-cell`, class: `${prefixCls.value}-row-expand-icon-cell`,
width: expandColumnWidth.value, width: expandColumnWidth.value,