You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.1 KiB
85 lines
2.1 KiB
import type { CustomizeComponent } from '../interface';
|
|
import Cell from '../Cell';
|
|
import { defineComponent } from 'vue';
|
|
import { useInjectTable } from '../context/TableContext';
|
|
|
|
export interface ExpandedRowProps {
|
|
prefixCls: string;
|
|
component: CustomizeComponent;
|
|
cellComponent: CustomizeComponent;
|
|
fixHeader: boolean;
|
|
fixColumn: boolean;
|
|
horizonScroll: boolean;
|
|
componentWidth: number;
|
|
expanded: boolean;
|
|
colSpan: number;
|
|
}
|
|
|
|
export default defineComponent<ExpandedRowProps>({
|
|
name: 'ExpandedRow',
|
|
inheritAttrs: false,
|
|
props: [
|
|
'prefixCls',
|
|
'component',
|
|
'cellComponent',
|
|
'fixHeader',
|
|
'fixColumn',
|
|
'horizonScroll',
|
|
'componentWidth',
|
|
'expanded',
|
|
'colSpan',
|
|
] as any,
|
|
setup(props, { slots, attrs }) {
|
|
const tableContext = useInjectTable();
|
|
return () => {
|
|
const {
|
|
prefixCls,
|
|
component: Component,
|
|
cellComponent,
|
|
fixHeader,
|
|
fixColumn,
|
|
expanded,
|
|
componentWidth,
|
|
colSpan,
|
|
} = props;
|
|
|
|
return (
|
|
<Component
|
|
class={attrs.class}
|
|
style={{
|
|
display: expanded ? null : 'none',
|
|
}}
|
|
>
|
|
<Cell
|
|
component={cellComponent}
|
|
prefixCls={prefixCls}
|
|
colSpan={colSpan}
|
|
v-slots={{
|
|
default: () => {
|
|
let contentNode: any = slots.default?.();
|
|
|
|
if (fixColumn) {
|
|
contentNode = (
|
|
<div
|
|
style={{
|
|
width: `${componentWidth - (fixHeader ? tableContext.scrollbarSize : 0)}px`,
|
|
position: 'sticky',
|
|
left: 0,
|
|
overflow: 'hidden',
|
|
}}
|
|
class={`${prefixCls}-expanded-row-fixed`}
|
|
>
|
|
{contentNode}
|
|
</div>
|
|
);
|
|
}
|
|
return contentNode;
|
|
},
|
|
}}
|
|
></Cell>
|
|
</Component>
|
|
);
|
|
};
|
|
},
|
|
});
|