ant-design-vue/components/table/index.tsx
2020-10-30 15:29:24 +08:00

96 lines
2.9 KiB
TypeScript

import { defineComponent } from 'vue';
import T from './Table';
import {} from './interface';
import { getOptionProps, getKey, getPropsData, getSlot } from '../_util/props-util';
const Table = defineComponent({
name: 'ATable',
Column: T.Column,
ColumnGroup: T.ColumnGroup,
props: T.props,
inheritAttrs: false,
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.component(Table.name, Table);
app.component(Table.Column.name, Table.Column);
app.component(Table.ColumnGroup.name, Table.ColumnGroup);
return app;
};
export default Table;