mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 21:50:07 +08:00
101 lines
3.1 KiB
Vue
101 lines
3.1 KiB
Vue
import { App, defineComponent, Plugin } from 'vue';
|
|
import T, { defaultTableProps } from './Table';
|
|
import Column from './Column';
|
|
import ColumnGroup from './ColumnGroup';
|
|
import { getOptionProps, getKey, getPropsData, getSlot } from '../_util/props-util';
|
|
|
|
const Table = defineComponent({
|
|
name: 'ATable',
|
|
Column: T.Column,
|
|
ColumnGroup: T.ColumnGroup,
|
|
inheritAttrs: false,
|
|
props: defaultTableProps,
|
|
methods: {
|
|
normalize(elements = []) {
|
|
const columns = [];
|
|
elements.forEach(element => {
|
|
if (!element) {
|
|
return;
|
|
}
|
|
const key = getKey(element);
|
|
const style = element.props?.style || {};
|
|
const cls = element.props?.class || '';
|
|
const props = getPropsData(element);
|
|
const { default: children, ...restSlots } = element.children || {};
|
|
const column = { ...restSlots, ...props, style, class: cls };
|
|
if (key) {
|
|
column.key = key;
|
|
}
|
|
if (element.type?.__ANT_TABLE_COLUMN_GROUP) {
|
|
column.children = this.normalize(typeof children === 'function' ? children() : children);
|
|
} else {
|
|
const customRender = element.children?.default;
|
|
column.customRender = column.customRender || customRender;
|
|
}
|
|
columns.push(column);
|
|
});
|
|
return columns;
|
|
},
|
|
updateColumns(cols = []) {
|
|
const columns = [];
|
|
const { $slots } = this;
|
|
cols.forEach(col => {
|
|
const { slots = {}, ...restProps } = col;
|
|
const column = {
|
|
...restProps,
|
|
};
|
|
Object.keys(slots).forEach(key => {
|
|
const name = slots[key];
|
|
if (column[key] === undefined && $slots[name]) {
|
|
column[key] = $slots[name];
|
|
}
|
|
});
|
|
// if (slotScopeName && $scopedSlots[slotScopeName]) {
|
|
// column.customRender = column.customRender || $scopedSlots[slotScopeName]
|
|
// }
|
|
if (col.children) {
|
|
column.children = this.updateColumns(column.children);
|
|
}
|
|
columns.push(column);
|
|
});
|
|
return columns;
|
|
},
|
|
},
|
|
render() {
|
|
const { normalize, $slots } = this;
|
|
const props: any = { ...getOptionProps(this), ...this.$attrs };
|
|
const columns = props.columns ? this.updateColumns(props.columns) : normalize(getSlot(this));
|
|
let { title, footer } = props;
|
|
const {
|
|
title: slotTitle,
|
|
footer: slotFooter,
|
|
expandedRowRender = props.expandedRowRender,
|
|
expandIcon,
|
|
} = $slots;
|
|
title = title || slotTitle;
|
|
footer = footer || slotFooter;
|
|
const tProps = {
|
|
...props,
|
|
columns,
|
|
title,
|
|
footer,
|
|
expandedRowRender,
|
|
expandIcon: this.$props.expandIcon || expandIcon,
|
|
};
|
|
return <T {...tProps} ref="table" />;
|
|
},
|
|
});
|
|
/* istanbul ignore next */
|
|
Table.install = function(app: App) {
|
|
app.component(Table.name, Table);
|
|
app.component(Table.Column.name, Table.Column);
|
|
app.component(Table.ColumnGroup.name, Table.ColumnGroup);
|
|
return app;
|
|
};
|
|
|
|
export default Table as typeof Table &
|
|
Plugin & {
|
|
readonly Column: typeof Column;
|
|
readonly ColumnGroup: typeof ColumnGroup;
|
|
};
|