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

feat: update table

pull/2682/head
tanjinzhou 2020-07-23 18:34:24 +08:00
parent 98733252c1
commit b4980867f4
26 changed files with 421 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/_util/store/connect.jsx
View File

@ -88,11 +88,11 @@ export default function connect(mapStateToProps) {
store, store,
ref: 'wrappedInstance', ref: 'wrappedInstance',
}; };
const slots = {}; // const slots = {};
for (let [key, value] of Object.entries($slots)) { // for (let [key, value] of Object.entries($slots)) {
slots[key] = () => value(); // slots[key] = () => value();
} // }
return createVNode(WrappedComponent, wrapProps, slots); return createVNode(WrappedComponent, wrapProps, $slots);
}, },
}; };
return Connect; return Connect;

3
components/table/Column.jsx
View File

@ -3,4 +3,7 @@ import { ColumnProps } from './interface';
export default { export default {
name: 'ATableColumn', name: 'ATableColumn',
props: ColumnProps, props: ColumnProps,
render() {
return null;
},
}; };

3
components/table/ColumnGroup.jsx
View File

@ -6,4 +6,7 @@ export default {
title: PropTypes.any, title: PropTypes.any,
}, },
__ANT_TABLE_COLUMN_GROUP: true, __ANT_TABLE_COLUMN_GROUP: true,
render() {
return null;
},
}; };

36
components/table/FilterDropdownMenuWrapper.jsx
View File

@ -1,13 +1,25 @@
export default { // export default {
name: 'FilterDropdownMenuWrapper', // name: 'FilterDropdownMenuWrapper',
methods: { // methods: {
handelClick(e) { // handelClick(e) {
e.stopPropagation(); // e.stopPropagation();
//this.$emit('click', e); // //this.$emit('click', e);
}, // },
}, // },
render() { // render() {
const { $slots, handelClick } = this; // const { $slots, handelClick } = this;
return <div onClick={handelClick}>{$slots.default}</div>; // return <div onClick={handelClick}>{$slots.default}</div>;
}, // },
// };
const FilterDropdownMenuWrapper = (_, { attrs, slots }) => {
return (
<div class={attrs.class} onClick={e => e.stopPropagation()}>
{slots.default?.()}
</div>
);
}; };
FilterDropdownMenuWrapper.inheritAttrs = false;
export default FilterDropdownMenuWrapper;

14
components/table/SelectionBox.jsx
View File

@ -2,11 +2,12 @@ import Checkbox from '../checkbox';
import Radio from '../radio'; import Radio from '../radio';
import { SelectionBoxProps } from './interface'; import { SelectionBoxProps } from './interface';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { getOptionProps, getListeners } from '../_util/props-util'; import { getOptionProps } from '../_util/props-util';
export default { export default {
name: 'SelectionBox', name: 'SelectionBox',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: SelectionBoxProps, props: SelectionBoxProps,
data() { data() {
return { return {
@ -46,17 +47,14 @@ export default {
}, },
render() { render() {
const { type, rowIndex, ...rest } = getOptionProps(this); const { type, rowIndex, ...rest } = { ...getOptionProps(this), ...this.$attrs };
const { checked } = this; const { checked } = this;
const checkboxProps = { const checkboxProps = {
props: { checked,
checked, ...rest,
...rest,
},
on: getListeners(this),
}; };
if (type === 'radio') { if (type === 'radio') {
checkboxProps.props.value = rowIndex; checkboxProps.value = rowIndex;
return <Radio {...checkboxProps} />; return <Radio {...checkboxProps} />;
} }
return <Checkbox {...checkboxProps} />; return <Checkbox {...checkboxProps} />;

6
components/table/SelectionCheckboxAll.jsx
View File

@ -90,6 +90,7 @@ function getCheckState(props) {
export default { export default {
name: 'SelectionCheckboxAll', name: 'SelectionCheckboxAll',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: SelectionCheckboxAllProps, props: SelectionCheckboxAllProps,
data() { data() {
const { $props: props } = this; const { $props: props } = this;
@ -136,7 +137,7 @@ export default {
// type should be 'every' | 'some' // type should be 'every' | 'some'
if (type === 'every' || type === 'some') { if (type === 'every' || type === 'some') {
return byDefaultChecked return byDefaultChecked
? data[type]((item, i) => getCheckboxPropsByItem(item, i).props.defaultChecked) ? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
: data[type]( : data[type](
(item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0, (item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0,
); );
@ -207,8 +208,7 @@ export default {
customSelections = customSelections =
newSelections.length > 0 ? ( newSelections.length > 0 ? (
<Dropdown getPopupContainer={getPopupContainer}> <Dropdown getPopupContainer={getPopupContainer} overlay={menu}>
<template slot="overlay">{menu}</template>
<div class={`${selectionPrefixCls}-down`}> <div class={`${selectionPrefixCls}-down`}>
<DownOutlined /> <DownOutlined />
</div> </div>

154
components/table/Table.jsx
View File

@ -1,3 +1,4 @@
import { inject } from 'vue';
import CaretUpFilled from '@ant-design/icons-vue/CaretUpFilled'; import CaretUpFilled from '@ant-design/icons-vue/CaretUpFilled';
import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled'; import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled';
import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table'; import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table';
@ -11,7 +12,7 @@ import Column from './Column';
import ColumnGroup from './ColumnGroup'; import ColumnGroup from './ColumnGroup';
import createBodyRow from './createBodyRow'; import createBodyRow from './createBodyRow';
import { flatArray, treeMap, flatFilter } from './util'; import { flatArray, treeMap, flatFilter } from './util';
import { initDefaultProps, mergeProps, getOptionProps, getListeners } from '../_util/props-util'; import { initDefaultProps, getOptionProps } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import { TableProps } from './interface'; import { TableProps } from './interface';
@ -110,9 +111,10 @@ function isFiltersChanged(state, filters) {
export default { export default {
name: 'Table', name: 'Table',
mixins: [BaseMixin],
inheritAttrs: false,
Column, Column,
ColumnGroup, ColumnGroup,
mixins: [BaseMixin],
props: initDefaultProps(TableProps, { props: initDefaultProps(TableProps, {
dataSource: [], dataSource: [],
useFixedHeader: false, useFixedHeader: false,
@ -128,15 +130,11 @@ export default {
childrenColumnName: 'children', childrenColumnName: 'children',
}), }),
inject: { setup() {
configProvider: { default: () => ConfigConsumerProps }, return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
}, },
// CheckboxPropsCache: {
// [key: string]: any;
// };
// store: Store;
// columns: ColumnProps<T>[];
// components: TableComponents;
data() { data() {
// this.columns = props.columns || normalizeColumns(props.children) // this.columns = props.columns || normalizeColumns(props.children)
@ -145,7 +143,7 @@ export default {
!props.expandedRowRender || !('scroll' in props), !props.expandedRowRender || !('scroll' in props),
'`expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.', '`expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
); );
this.CheckboxPropsCache = {}; this.checkboxPropsCache = {};
this.store = createStore({ this.store = createStore({
selectedRowKeys: getRowSelection(this.$props).selectedRowKeys || [], selectedRowKeys: getRowSelection(this.$props).selectedRowKeys || [],
@ -185,7 +183,7 @@ export default {
}); });
const { rowSelection } = this; const { rowSelection } = this;
if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) { if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) {
this.CheckboxPropsCache = {}; this.checkboxPropsCache = {};
} }
} else if (oldVal && !val) { } else if (oldVal && !val) {
this.store.setState({ this.store.setState({
@ -200,7 +198,7 @@ export default {
this.store.setState({ this.store.setState({
selectionDirty: false, selectionDirty: false,
}); });
this.CheckboxPropsCache = {}; this.checkboxPropsCache = {};
}, },
columns(val) { columns(val) {
@ -236,18 +234,20 @@ export default {
} }
}, },
methods: { methods: {
setTableRef(table) {
this.vcTable = table;
},
getCheckboxPropsByItem(item, index) { getCheckboxPropsByItem(item, index) {
const rowSelection = getRowSelection(this.$props); const rowSelection = getRowSelection(this.$props);
if (!rowSelection.getCheckboxProps) { if (!rowSelection.getCheckboxProps) {
return { props: {} }; return {};
} }
const key = this.getRecordKey(item, index); const key = this.getRecordKey(item, index);
// Cache checkboxProps // Cache checkboxProps
if (!this.CheckboxPropsCache[key]) { if (!this.checkboxPropsCache[key]) {
this.CheckboxPropsCache[key] = rowSelection.getCheckboxProps(item); this.checkboxPropsCache[key] = rowSelection.getCheckboxProps(item) || {};
} }
this.CheckboxPropsCache[key].props = this.CheckboxPropsCache[key].props || {}; return this.checkboxPropsCache[key];
return this.CheckboxPropsCache[key];
}, },
getDefaultSelection() { getDefaultSelection() {
@ -256,9 +256,7 @@ export default {
return []; return [];
} }
return this.getFlatData() return this.getFlatData()
.filter( .filter((item, rowIndex) => this.getCheckboxPropsByItem(item, rowIndex).defaultChecked)
(item, rowIndex) => this.getCheckboxPropsByItem(item, rowIndex).props.defaultChecked,
)
.map((record, rowIndex) => this.getRecordKey(record, rowIndex)); .map((record, rowIndex) => this.getRecordKey(record, rowIndex));
}, },
@ -447,13 +445,7 @@ export default {
onRow(prefixCls, record, index) { onRow(prefixCls, record, index) {
const { customRow } = this; const { customRow } = this;
const custom = customRow ? customRow(record, index) : {}; const custom = customRow ? customRow(record, index) : {};
return mergeProps(custom, { return { ...custom, prefixCls, store: this.store, rowKey: this.getRecordKey(record, index) };
props: {
prefixCls,
store: this.store,
rowKey: this.getRecordKey(record, index),
},
});
}, },
setSelectedRowKeys(selectedRowKeys, selectionInfo) { setSelectedRowKeys(selectedRowKeys, selectionInfo) {
@ -490,19 +482,19 @@ export default {
}, },
generatePopupContainerFunc(getPopupContainer) { generatePopupContainerFunc(getPopupContainer) {
const { scroll } = this.$props; const { scroll } = this.$props;
const table = this.$refs.vcTable; const table = this.vcTable;
if (getPopupContainer) { if (getPopupContainer) {
return getPopupContainer; return getPopupContainer;
} }
// Use undefined to let rc component use default logic. // Use undefined to let rc component use default logic.
return scroll && table ? () => table.getTableNode() : undefined; return scroll && table ? () => table.tableNode : undefined;
}, },
scrollToFirstRow() { scrollToFirstRow() {
const { scroll } = this.$props; const { scroll } = this.$props;
if (scroll && scroll.scrollToFirstRowOnChange !== false) { if (scroll && scroll.scrollToFirstRowOnChange !== false) {
scrollTo(0, { scrollTo(0, {
getContainer: () => { getContainer: () => {
return this.$refs.vcTable.getBodyTable(); return this.vcTable.ref_bodyTable;
}, },
}); });
} }
@ -681,7 +673,7 @@ export default {
: this.getDefaultSelection(); : this.getDefaultSelection();
const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection); const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
const changeableRowKeys = data const changeableRowKeys = data
.filter((item, i) => !this.getCheckboxPropsByItem(item, i).props.disabled) .filter((item, i) => !this.getCheckboxPropsByItem(item, i).disabled)
.map((item, i) => this.getRecordKey(item, i)); .map((item, i) => this.getRecordKey(item, i));
const changeRowKeys = []; const changeRowKeys = [];
@ -939,21 +931,17 @@ export default {
const position = pagination.position || 'bottom'; const position = pagination.position || 'bottom';
const total = pagination.total || this.filterDataCnt; const total = pagination.total || this.filterDataCnt;
const { class: cls, style, onChange, onShowSizeChange, ...restProps } = pagination; // eslint-disable-line const { class: cls, style, onChange, onShowSizeChange, ...restProps } = pagination; // eslint-disable-line
const paginationProps = mergeProps({ const paginationProps = {
key: `pagination-${paginationPosition}`, key: `pagination-${paginationPosition}`,
class: classNames(cls, `${prefixCls}-pagination`), class: classNames(cls, `${prefixCls}-pagination`),
props: { ...restProps,
...restProps, total,
total, size,
size, current: this.getMaxCurrent(total),
current: this.getMaxCurrent(total),
},
style, style,
on: { onChange: this.handlePageChange,
change: this.handlePageChange, onShowSizeChange: this.handleShowSizeChange,
showSizeChange: this.handleShowSizeChange, };
},
});
return total > 0 && (position === paginationPosition || position === 'both') ? ( return total > 0 && (position === paginationPosition || position === 'both') ? (
<Pagination {...paginationProps} /> <Pagination {...paginationProps} />
) : null; ) : null;
@ -967,20 +955,14 @@ export default {
? this.handleRadioSelect(record, index, e) ? this.handleRadioSelect(record, index, e)
: this.handleSelect(record, index, e); : this.handleSelect(record, index, e);
}; };
const selectionBoxProps = mergeProps( const selectionBoxProps = {
{ type,
props: { store: this.store,
type, rowIndex: rowKey,
store: this.store, defaultSelection: this.getDefaultSelection(),
rowIndex: rowKey, onChange: handleChange,
defaultSelection: this.getDefaultSelection(), ...props,
}, };
on: {
change: handleChange,
},
},
props,
);
return ( return (
<span onClick={stopPropagation}> <span onClick={stopPropagation}>
@ -996,7 +978,7 @@ export default {
if (rowSelection) { if (rowSelection) {
const data = this.getFlatCurrentPageData().filter((item, index) => { const data = this.getFlatCurrentPageData().filter((item, index) => {
if (rowSelection.getCheckboxProps) { if (rowSelection.getCheckboxProps) {
return !this.getCheckboxPropsByItem(item, index).props.disabled; return !this.getCheckboxPropsByItem(item, index).disabled;
} }
return true; return true;
}); });
@ -1016,7 +998,7 @@ export default {
}; };
if (rowSelection.type !== 'radio') { if (rowSelection.type !== 'radio') {
const checkboxAllDisabled = data.every( const checkboxAllDisabled = data.every(
(item, index) => this.getCheckboxPropsByItem(item, index).props.disabled, (item, index) => this.getCheckboxPropsByItem(item, index).disabled,
); );
selectionColumn.title = selectionColumn.title || ( selectionColumn.title = selectionColumn.title || (
<SelectionCheckboxAll <SelectionCheckboxAll
@ -1111,10 +1093,9 @@ export default {
...column.customHeaderCell(col), ...column.customHeaderCell(col),
}; };
} }
colProps.on = colProps.on || {};
// Add sorter logic // Add sorter logic
const onHeaderCellClick = colProps.on.click; const onHeaderCellClick = colProps.onClick;
colProps.on.click = (...args) => { colProps.onClick = (...args) => {
this.toggleSortOrder(column); this.toggleSortOrder(column);
if (onHeaderCellClick) { if (onHeaderCellClick) {
onHeaderCellClick(...args); onHeaderCellClick(...args);
@ -1167,7 +1148,10 @@ export default {
getPopupContainer: contextGetPopupContainer, getPopupContainer: contextGetPopupContainer,
transformCellText, transformCellText,
}) { }) {
const { showHeader, locale, getPopupContainer, ...restProps } = getOptionProps(this); const { showHeader, locale, getPopupContainer, ...restProps } = {
...getOptionProps(this),
...this.$attrs,
};
const data = this.getCurrentPageData(); const data = this.getCurrentPageData();
const expandIconAsCell = this.expandedRowRender && this.expandIconAsCell !== false; const expandIconAsCell = this.expandedRowRender && this.expandIconAsCell !== false;
@ -1177,7 +1161,7 @@ export default {
// Merge too locales // Merge too locales
const mergedLocale = { ...contextLocale, ...locale }; const mergedLocale = { ...contextLocale, ...locale };
if (!locale || !locale.emptyText) { if (!locale || !locale.emptyText) {
mergedLocale.emptyText = renderEmpty(h, 'Table'); mergedLocale.emptyText = renderEmpty('Table');
} }
const classString = classNames({ const classString = classNames({
@ -1210,23 +1194,20 @@ export default {
} }
const vcTableProps = { const vcTableProps = {
key: 'table', key: 'table',
props: { expandIcon: this.renderExpandIcon(prefixCls),
expandIcon: this.renderExpandIcon(prefixCls), ...restProps,
...restProps, customRow: (record, index) => this.onRow(prefixCls, record, index),
customRow: (record, index) => this.onRow(prefixCls, record, index), components: this.sComponents,
components: this.sComponents, prefixCls,
prefixCls, data,
data, columns,
columns, showHeader,
showHeader, expandIconColumnIndex,
expandIconColumnIndex, expandIconAsCell,
expandIconAsCell, emptyText: mergedLocale.emptyText,
emptyText: mergedLocale.emptyText, transformCellText,
transformCellText,
},
on: getListeners(this),
class: classString, class: classString,
ref: 'vcTable', ref: this.setTableRef,
}; };
return <VcTable {...vcTableProps} />; return <VcTable {...vcTableProps} />;
}, },
@ -1248,13 +1229,7 @@ export default {
let loading = this.loading; let loading = this.loading;
if (typeof loading === 'boolean') { if (typeof loading === 'boolean') {
loading = { loading = {
props: { spinning: loading,
spinning: loading,
},
};
} else {
loading = {
props: { ...loading },
}; };
} }
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
@ -1293,8 +1268,9 @@ export default {
? `${paginationPatchClass} ${prefixCls}-spin-holder` ? `${paginationPatchClass} ${prefixCls}-spin-holder`
: '', : '',
}; };
const { class: className, style } = this.$attrs;
return ( return (
<div class={classNames(`${prefixCls}-wrapper`)}> <div class={classNames(`${prefixCls}-wrapper`, className)} style={style}>
<Spin {...spinProps}> <Spin {...spinProps}>
{this.renderPagination(prefixCls, 'top')} {this.renderPagination(prefixCls, 'top')}
{table} {table}

15
components/table/createBodyRow.jsx
View File

@ -1,7 +1,8 @@
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { Store } from './createStore'; import { Store } from './createStore';
import { getListeners } from '../_util/props-util'; import { getSlot } from '../_util/props-util';
import Omit from 'omit.js';
const BodyRowProps = { const BodyRowProps = {
store: Store, store: Store,
@ -12,6 +13,7 @@ const BodyRowProps = {
export default function createBodyRow(Component = 'tr') { export default function createBodyRow(Component = 'tr') {
const BodyRow = { const BodyRow = {
name: 'BodyRow', name: 'BodyRow',
inheritAttrs: false,
props: BodyRowProps, props: BodyRowProps,
data() { data() {
const { selectedRowKeys } = this.store.getState(); const { selectedRowKeys } = this.store.getState();
@ -44,13 +46,20 @@ export default function createBodyRow(Component = 'tr') {
}, },
render() { render() {
const rowProps = Omit({ ...this.$props, ...this.$attrs }, [
'prefixCls',
'rowKey',
'store',
'class',
]);
const className = { const className = {
[`${this.prefixCls}-row-selected`]: this.selected, [`${this.prefixCls}-row-selected`]: this.selected,
[this.$attrs.class]: !!this.$attrs.class,
}; };
return ( return (
<Component class={className} {...{ on: getListeners(this) }}> <Component class={className} {...rowProps}>
{this.$slots.default} {getSlot(this)}
</Component> </Component>
); );
}, },

10
components/table/filterDropdown.jsx
View File

@ -20,6 +20,7 @@ function stopPropagation(e) {
export default { export default {
name: 'FilterMenu', name: 'FilterMenu',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: initDefaultProps(FilterMenuProps, { props: initDefaultProps(FilterMenuProps, {
handleFilter() {}, handleFilter() {},
column: {}, column: {},
@ -230,10 +231,9 @@ export default {
} }
if (filterIcon.length === 1 && isValidElement(filterIcon[0])) { if (filterIcon.length === 1 && isValidElement(filterIcon[0])) {
return cloneElement(filterIcon[0], { return cloneElement(filterIcon[0], {
on: { title: filterIcon.props?.title || locale.filterTitle,
click: stopPropagation, onClick: stopPropagation,
}, class: classNames(`${prefixCls}-icon`, dropdownIconClass, filterIcon.props?.class),
class: classNames(`${prefixCls}-icon`, dropdownIconClass),
}); });
} }
return <span class={classNames(`${prefixCls}-icon`, dropdownIconClass)}>{filterIcon}</span>; return <span class={classNames(`${prefixCls}-icon`, dropdownIconClass)}>{filterIcon}</span>;
@ -321,8 +321,8 @@ export default {
onVisibleChange={this.onVisibleChange} onVisibleChange={this.onVisibleChange}
getPopupContainer={getPopupContainer} getPopupContainer={getPopupContainer}
forceRender forceRender
overlay={menus}
> >
<template slot="overlay">{menus}</template>
{this.renderFilterIcon()} {this.renderFilterIcon()}
</Dropdown> </Dropdown>
); );

83
components/table/index.jsx
View File

@ -1,53 +1,32 @@
import T from './Table'; import T from './Table';
import ref from 'vue-ref'; import { getOptionProps, getKey, getPropsData, getSlot } from '../_util/props-util';
import Vue from 'vue';
import {
getOptionProps,
getKey,
getClass,
getStyle,
getEvents,
getSlotOptions,
camelize,
getSlots,
getListeners,
} from '../_util/props-util';
import Base from '../base';
Vue.use(ref, { name: 'ant-ref' });
const Table = { const Table = {
name: 'ATable', name: 'ATable',
Column: T.Column, Column: T.Column,
ColumnGroup: T.ColumnGroup, ColumnGroup: T.ColumnGroup,
props: T.props, props: T.props,
inheritAttrs: false,
methods: { methods: {
normalize(elements = []) { normalize(elements = []) {
const columns = []; const columns = [];
elements.forEach(element => { elements.forEach(element => {
if (!element.tag) { if (!element) {
return; return;
} }
const key = getKey(element); const key = getKey(element);
const style = getStyle(element); const style = element.props?.style || {};
const cls = getClass(element); const cls = element.props?.class || '';
const props = getOptionProps(element); const props = getPropsData(element);
const events = getEvents(element); const { default: children, ...restSlots } = element.children;
const listeners = {}; const column = { ...restSlots, ...props, style, class: cls };
Object.keys(events).forEach(e => {
const k = `on-${e}`;
listeners[camelize(k)] = events[e];
});
const { default: children, ...restSlots } = getSlots(element);
const column = { ...restSlots, ...props, style, class: cls, ...listeners };
if (key) { if (key) {
column.key = key; column.key = key;
} }
if (getSlotOptions(element).__ANT_TABLE_COLUMN_GROUP) { if (element.type?.__ANT_TABLE_COLUMN_GROUP) {
column.children = this.normalize(typeof children === 'function' ? children() : children); column.children = this.normalize(typeof children === 'function' ? children() : children);
} else { } else {
const customRender = const customRender = element.children?.default;
element.data && element.data.scopedSlots && element.data.scopedSlots.default;
column.customRender = column.customRender || customRender; column.customRender = column.customRender || customRender;
} }
columns.push(column); columns.push(column);
@ -56,22 +35,16 @@ const Table = {
}, },
updateColumns(cols = []) { updateColumns(cols = []) {
const columns = []; const columns = [];
const { $slots, $scopedSlots } = this; const { $slots } = this;
cols.forEach(col => { cols.forEach(col => {
const { slots = {}, scopedSlots = {}, ...restProps } = col; const { slots = {}, ...restProps } = col;
const column = { const column = {
...restProps, ...restProps,
}; };
Object.keys(slots).forEach(key => { Object.keys(slots).forEach(key => {
const name = slots[key]; const name = slots[key];
if (column[key] === undefined && $slots[name]) { if (column[key] === undefined && $slots[name]) {
column[key] = $slots[name].length === 1 ? $slots[name][0] : $slots[name]; column[key] = $slots[name];
}
});
Object.keys(scopedSlots).forEach(key => {
const name = scopedSlots[key];
if (column[key] === undefined && $scopedSlots[name]) {
column[key] = $scopedSlots[name];
} }
}); });
// if (slotScopeName && $scopedSlots[slotScopeName]) { // if (slotScopeName && $scopedSlots[slotScopeName]) {
@ -86,36 +59,32 @@ const Table = {
}, },
}, },
render() { render() {
const { $slots, normalize, $scopedSlots } = this; const { normalize, $slots } = this;
const props = getOptionProps(this); const props = { ...getOptionProps(this), ...this.$attrs };
const columns = props.columns ? this.updateColumns(props.columns) : normalize($slots.default); const columns = props.columns ? this.updateColumns(props.columns) : normalize(getSlot(this));
let { title, footer } = props; let { title, footer } = props;
const { const {
title: slotTitle, title: slotTitle,
footer: slotFooter, footer: slotFooter,
expandedRowRender = props.expandedRowRender, expandedRowRender = props.expandedRowRender,
} = $scopedSlots; } = $slots;
title = title || slotTitle; title = title || slotTitle;
footer = footer || slotFooter; footer = footer || slotFooter;
const tProps = { const tProps = {
props: { ...props,
...props, columns,
columns, title,
title, footer,
footer, expandedRowRender,
expandedRowRender,
},
on: getListeners(this),
}; };
return <T {...tProps} />; return <T {...tProps} />;
}, },
}; };
/* istanbul ignore next */ /* istanbul ignore next */
Table.install = function(Vue) { Table.install = function(app) {
Vue.use(Base); app.component(Table.name, Table);
Vue.component(Table.name, Table); app.component(Table.Column.name, Table.Column);
Vue.component(Table.Column.name, Table.Column); app.component(Table.ColumnGroup.name, Table.ColumnGroup);
Vue.component(Table.ColumnGroup.name, Table.ColumnGroup);
}; };
export default Table; export default Table;

102
components/vc-table/index.js
View File

@ -1,79 +1,37 @@
// base rc-table 6.10.9 // base rc-table 6.10.9
import T from './src/Table'; import Table from './src/Table';
import Column from './src/Column'; import Column from './src/Column';
import ColumnGroup from './src/ColumnGroup'; import ColumnGroup from './src/ColumnGroup';
import {
getOptionProps,
getKey,
getClass,
getStyle,
getEvents,
getSlotOptions,
camelize,
getSlots,
getListeners,
} from '../_util/props-util';
import { INTERNAL_COL_DEFINE } from './src/utils'; import { INTERNAL_COL_DEFINE } from './src/utils';
const Table = { // const Table = {
name: 'Table', // name: 'Table',
Column, // inheritAttrs: false,
ColumnGroup, // Column,
props: T.props, // ColumnGroup,
methods: { // props: T.props,
getTableNode() { // methods: {
return this.$refs.table.tableNode; // getTableNode() {
}, // return this.table.tableNode;
getBodyTable() { // },
return this.$refs.table.ref_bodyTable; // getBodyTable() {
}, // return this.table.ref_bodyTable;
normalize(elements = []) { // },
const columns = []; // saveTable(node) {
elements.forEach(element => { // this.table = node;
if (!element.tag) { // },
return; // },
} // render() {
const key = getKey(element); // const props = getOptionProps(this);
const style = getStyle(element); // const columns = props.columns;
const cls = getClass(element); // const tProps = {
const props = getOptionProps(element); // ...props,
const events = getEvents(element); // ...this.$attrs,
const listeners = {}; // columns,
Object.keys(events).forEach(e => { // ref: this.saveTable,
const k = `on-${e}`; // };
listeners[camelize(k)] = events[e]; // return <T {...tProps} />;
}); // },
const { default: children, title } = getSlots(element); // };
const column = { title, ...props, style, class: cls, ...listeners };
if (key) {
column.key = key;
}
if (getSlotOptions(element).isTableColumnGroup) {
column.children = this.normalize(typeof children === 'function' ? children() : children);
} else {
const customRender =
element.data && element.data.scopedSlots && element.data.scopedSlots.default;
column.customRender = column.customRender || customRender;
}
columns.push(column);
});
return columns;
},
},
render() {
const { $slots, normalize } = this;
const props = getOptionProps(this);
const columns = props.columns || normalize($slots.default);
const tProps = {
props: {
...props,
columns,
},
on: getListeners(this),
ref: 'table',
};
return <T {...tProps} />;
},
};
export default Table; export default Table;
export { Column, ColumnGroup, INTERNAL_COL_DEFINE }; export { Column, ColumnGroup, INTERNAL_COL_DEFINE };

119
components/vc-table/src/BaseTable.jsx
View File

@ -1,14 +1,15 @@
import { inject } from 'vue';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import classNames from 'classnames'; import classNames from 'classnames';
import ColGroup from './ColGroup'; import ColGroup from './ColGroup';
import TableHeader from './TableHeader'; import TableHeader from './TableHeader';
import TableRow from './TableRow'; import TableRow from './TableRow';
import ExpandableRow from './ExpandableRow'; import ExpandableRow from './ExpandableRow';
import { mergeProps, getListeners } from '../../_util/props-util';
import { connect } from '../../_util/store'; import { connect } from '../../_util/store';
function noop() {} function noop() {}
const BaseTable = { const BaseTable = {
name: 'BaseTable', name: 'BaseTable',
inheritAttrs: false,
props: { props: {
fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
columns: PropTypes.array.isRequired, columns: PropTypes.array.isRequired,
@ -20,8 +21,10 @@ const BaseTable = {
getRowKey: PropTypes.func, getRowKey: PropTypes.func,
isAnyColumnsFixed: PropTypes.bool, isAnyColumnsFixed: PropTypes.bool,
}, },
inject: { setup() {
table: { default: () => ({}) }, return {
table: inject('table', {}),
};
}, },
methods: { methods: {
getColumns(cols) { getColumns(cols) {
@ -32,8 +35,8 @@ const BaseTable = {
...column, ...column,
className: className:
!!column.fixed && !fixed !!column.fixed && !fixed
? classNames(`${prefixCls}-fixed-columns-in-body`, column.className || column.class) ? classNames(`${prefixCls}-fixed-columns-in-body`, column.className, column.class)
: column.className || column.class, : classNames(column.className, column.class),
})); }));
}, },
handleRowHover(isHover, key) { handleRowHover(isHover, key) {
@ -50,14 +53,13 @@ const BaseTable = {
childrenColumnName, childrenColumnName,
rowClassName, rowClassName,
customRow = noop, customRow = noop,
} = this.table; onRowClick = noop,
const { onRowDoubleClick = noop,
rowClick: onRowClick = noop, onRowContextMenu = noop,
rowDoubleclick: onRowDoubleClick = noop, onRowMouseEnter = noop,
rowContextmenu: onRowContextMenu = noop, onRowMouseLeave = noop,
rowMouseenter: onRowMouseEnter = noop, rowRef,
rowMouseleave: onRowMouseLeave = noop, } = { ...this.table.$attrs, ...this.table.$props, ...this.table.$data };
} = getListeners(this.table);
const { getRowKey, fixed, expander, isAnyColumnsFixed } = this; const { getRowKey, fixed, expander, isAnyColumnsFixed } = this;
const rows = []; const rows = [];
@ -70,7 +72,7 @@ const BaseTable = {
const onHoverProps = {}; const onHoverProps = {};
if (columnManager.isAnyColumnsFixed()) { if (columnManager.isAnyColumnsFixed()) {
onHoverProps.hover = this.handleRowHover; onHoverProps.onHover = this.handleRowHover;
} }
let leafColumns; let leafColumns;
@ -85,56 +87,49 @@ const BaseTable = {
const rowPrefixCls = `${prefixCls}-row`; const rowPrefixCls = `${prefixCls}-row`;
const expandableRowProps = { const expandableRowProps = {
props: { ...expander.props,
...expander.props, fixed,
fixed, index: i,
index: i, prefixCls: rowPrefixCls,
prefixCls: rowPrefixCls, record,
record, rowKey: key,
rowKey: key, needIndentSpaced: expander.needIndentSpaced,
needIndentSpaced: expander.needIndentSpaced,
},
key, key,
on: { onRowClick,
// ...expander.on, onExpandedChange: expander.handleExpandChange,
rowClick: onRowClick,
expandedChange: expander.handleExpandChange,
},
scopedSlots: {
default: expandableRow => {
const tableRowProps = mergeProps(
{
props: {
fixed,
indent,
record,
index: i,
prefixCls: rowPrefixCls,
childrenColumnName,
columns: leafColumns,
rowKey: key,
ancestorKeys,
components,
isAnyColumnsFixed,
customRow,
},
on: {
rowDoubleclick: onRowDoubleClick,
rowContextmenu: onRowContextMenu,
rowMouseenter: onRowMouseEnter,
rowMouseleave: onRowMouseLeave,
...onHoverProps,
},
class: className,
ref: `row_${i}_${indent}`,
},
expandableRow,
);
return <TableRow {...tableRowProps} />;
},
},
}; };
const row = <ExpandableRow {...expandableRowProps} />; const row = (
<ExpandableRow
{...expandableRowProps}
vSlots={{
default: expandableRow => {
const tableRowProps = {
fixed,
indent,
record,
index: i,
prefixCls: rowPrefixCls,
childrenColumnName,
columns: leafColumns,
rowKey: key,
ancestorKeys,
components,
isAnyColumnsFixed,
customRow,
onRowDoubleClick,
onRowContextMenu,
onRowMouseEnter,
onRowMouseLeave,
...onHoverProps,
class: className,
ref: rowRef(record, i, indent),
...expandableRow,
};
return <TableRow {...tableRowProps} />;
},
}}
/>
);
rows.push(row); rows.push(row);
expander.renderRows(this.renderRows, rows, record, i, indent, fixed, key, ancestorKeys); expander.renderRows(this.renderRows, rows, record, i, indent, fixed, key, ancestorKeys);

26
components/vc-table/src/BodyTable.jsx
View File

@ -1,9 +1,11 @@
import { inject } from 'vue';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { measureScrollbar } from './utils'; import { measureScrollbar } from './utils';
import BaseTable from './BaseTable'; import BaseTable from './BaseTable';
export default { export default {
name: 'BodyTable', name: 'BodyTable',
inheritAttrs: false,
props: { props: {
fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
columns: PropTypes.array.isRequired, columns: PropTypes.array.isRequired,
@ -14,8 +16,10 @@ export default {
expander: PropTypes.object.isRequired, expander: PropTypes.object.isRequired,
isAnyColumnsFixed: PropTypes.bool, isAnyColumnsFixed: PropTypes.bool,
}, },
inject: { setup() {
table: { default: () => ({}) }, return {
table: inject('table', {}),
};
}, },
render() { render() {
const { prefixCls, scroll } = this.table; const { prefixCls, scroll } = this.table;
@ -89,14 +93,7 @@ export default {
<div <div
class={`${prefixCls}-body-inner`} class={`${prefixCls}-body-inner`}
style={innerBodyStyle} style={innerBodyStyle}
{...{ ref={saveRef(refName)}
directives: [
{
name: 'ant-ref',
value: saveRef(refName),
},
],
}}
onWheel={handleWheel} onWheel={handleWheel}
onScroll={handleBodyScroll} onScroll={handleBodyScroll}
> >
@ -114,14 +111,7 @@ export default {
key="bodyTable" key="bodyTable"
class={`${prefixCls}-body`} class={`${prefixCls}-body`}
style={bodyStyle} style={bodyStyle}
{...{ ref={saveRef('bodyTable')}
directives: [
{
name: 'ant-ref',
value: saveRef('bodyTable'),
},
],
}}
onWheel={handleWheel} onWheel={handleWheel}
onScroll={handleBodyScroll} onScroll={handleBodyScroll}
> >

8
components/vc-table/src/ColGroup.jsx
View File

@ -1,14 +1,18 @@
import { inject } from 'vue';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { INTERNAL_COL_DEFINE } from './utils'; import { INTERNAL_COL_DEFINE } from './utils';
export default { export default {
name: 'ColGroup', name: 'ColGroup',
inheritAttrs: false,
props: { props: {
fixed: PropTypes.string, fixed: PropTypes.string,
columns: PropTypes.array, columns: PropTypes.array,
}, },
inject: { setup() {
table: { default: () => ({}) }, return {
table: inject('table', {}),
};
}, },
render() { render() {
const { fixed, table } = this; const { fixed, table } = this;

42
components/vc-table/src/Column.jsx
View File

@ -1,20 +1,24 @@
import PropTypes from '../../_util/vue-types'; // import PropTypes from '../../_util/vue-types';
export default { // export default {
name: 'Column', // name: 'Column',
props: { // props: {
rowSpan: PropTypes.number, // rowSpan: PropTypes.number,
colSpan: PropTypes.number, // colSpan: PropTypes.number,
title: PropTypes.any, // title: PropTypes.any,
dataIndex: PropTypes.string, // dataIndex: PropTypes.string,
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
ellipsis: PropTypes.bool, // ellipsis: PropTypes.bool,
fixed: PropTypes.oneOf([true, 'left', 'right']), // fixed: PropTypes.oneOf([true, 'left', 'right']),
align: PropTypes.oneOf(['left', 'center', 'right']), // align: PropTypes.oneOf(['left', 'center', 'right']),
customRender: PropTypes.func, // customRender: PropTypes.func,
className: PropTypes.string, // className: PropTypes.string,
// onCellClick: PropTypes.func, // // onCellClick: PropTypes.func,
customCell: PropTypes.func, // customCell: PropTypes.func,
customHeaderCell: PropTypes.func, // customHeaderCell: PropTypes.func,
}, // },
}; // };
const Column = () => null;
export default Column;

3
components/vc-table/src/ColumnGroup.jsx
View File

@ -6,4 +6,7 @@ export default {
title: PropTypes.any, title: PropTypes.any,
}, },
isTableColumnGroup: true, isTableColumnGroup: true,
render() {
return null;
},
}; };

1
components/vc-table/src/ExpandIcon.jsx
View File

@ -3,6 +3,7 @@ import BaseMixin from '../../_util/BaseMixin';
export default { export default {
name: 'ExpandIcon', name: 'ExpandIcon',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: { props: {
record: PropTypes.object, record: PropTypes.object,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,

31
components/vc-table/src/ExpandableRow.jsx
View File

@ -2,10 +2,12 @@ import PropTypes from '../../_util/vue-types';
import ExpandIcon from './ExpandIcon'; import ExpandIcon from './ExpandIcon';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { connect } from '../../_util/store'; import { connect } from '../../_util/store';
import { getSlot } from '../../_util/props-util';
const ExpandableRow = { const ExpandableRow = {
mixins: [BaseMixin], mixins: [BaseMixin],
name: 'ExpandableRow', name: 'ExpandableRow',
inheritAttrs: false,
props: { props: {
prefixCls: PropTypes.string.isRequired, prefixCls: PropTypes.string.isRequired,
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@ -96,35 +98,22 @@ const ExpandableRow = {
}, },
render() { render() {
const { const { childrenColumnName, expandedRowRender, indentSize, record, fixed, expanded } = this;
childrenColumnName,
expandedRowRender,
indentSize,
record,
fixed,
$scopedSlots,
expanded,
} = this;
this.tempExpandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false; this.tempExpandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false;
this.tempExpandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1; this.tempExpandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1;
const childrenData = record[childrenColumnName]; const childrenData = record[childrenColumnName];
this.expandable = !!(childrenData || expandedRowRender); this.expandable = !!(childrenData || expandedRowRender);
const expandableRowProps = { const expandableRowProps = {
props: { indentSize,
indentSize, expanded, // not used in TableRow, but it's required to re-render TableRow when `expanded` changes
expanded, // not used in TableRow, but it's required to re-render TableRow when `expanded` changes hasExpandIcon: this.hasExpandIcon,
hasExpandIcon: this.hasExpandIcon, renderExpandIcon: this.renderExpandIcon,
renderExpandIcon: this.renderExpandIcon, renderExpandIconCell: this.renderExpandIconCell,
renderExpandIconCell: this.renderExpandIconCell, onRowClick: this.handleRowClick,
},
on: {
rowClick: this.handleRowClick,
},
}; };
return $scopedSlots.default && $scopedSlots.default(expandableRowProps); return getSlot(this, 'default', expandableRowProps);
}, },
}; };

28
components/vc-table/src/ExpandableTable.jsx
View File

@ -4,7 +4,7 @@ import { connect } from '../../_util/store';
import shallowEqual from 'shallowequal'; import shallowEqual from 'shallowequal';
import TableRow from './TableRow'; import TableRow from './TableRow';
import { remove } from './utils'; import { remove } from './utils';
import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util'; import { initDefaultProps, getOptionProps, getSlot } from '../../_util/props-util';
export const ExpandableTableProps = () => ({ export const ExpandableTableProps = () => ({
expandIconAsCell: PropTypes.bool, expandIconAsCell: PropTypes.bool,
@ -29,6 +29,7 @@ export const ExpandableTableProps = () => ({
const ExpandableTable = { const ExpandableTable = {
name: 'ExpandableTable', name: 'ExpandableTable',
inheritAttrs: false,
mixins: [BaseMixin], mixins: [BaseMixin],
props: initDefaultProps(ExpandableTableProps(), { props: initDefaultProps(ExpandableTableProps(), {
expandIconAsCell: false, expandIconAsCell: false,
@ -166,9 +167,7 @@ const ExpandableTable = {
const { expandedRowKeys } = this.store.getState(); const { expandedRowKeys } = this.store.getState();
const expanded = expandedRowKeys.includes(parentKey); const expanded = expandedRowKeys.includes(parentKey);
return { return {
attrs: { props: { colSpan: colCount },
colSpan: colCount,
},
children: children:
fixed !== 'right' ? expandedRowRender(record, index, indent, expanded) : '&nbsp;', fixed !== 'right' ? expandedRowRender(record, index, indent, expanded) : '&nbsp;',
}; };
@ -227,21 +226,18 @@ const ExpandableTable = {
}, },
render() { render() {
const { data, childrenColumnName, $scopedSlots } = this; const { data, childrenColumnName } = this;
const props = getOptionProps(this); const props = getOptionProps(this);
const needIndentSpaced = data.some(record => record[childrenColumnName]); const needIndentSpaced = data.some(record => record[childrenColumnName]);
return ( return getSlot(this, 'default', {
$scopedSlots.default && ...props,
$scopedSlots.default({ ...this.$attrs,
props, needIndentSpaced,
on: getListeners(this), renderRows: this.renderRows,
needIndentSpaced, handleExpandChange: this.handleExpandChange,
renderRows: this.renderRows, renderExpandIndentCell: this.renderExpandIndentCell,
handleExpandChange: this.handleExpandChange, });
renderExpandIndentCell: this.renderExpandIndentCell,
})
);
}, },
}; };

17
components/vc-table/src/HeadTable.jsx
View File

@ -1,3 +1,4 @@
import { inject } from 'vue';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { measureScrollbar } from './utils'; import { measureScrollbar } from './utils';
import BaseTable from './BaseTable'; import BaseTable from './BaseTable';
@ -5,6 +6,7 @@ import classNames from 'classnames';
export default { export default {
name: 'HeadTable', name: 'HeadTable',
inheritAttrs: false,
props: { props: {
fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
columns: PropTypes.array.isRequired, columns: PropTypes.array.isRequired,
@ -12,8 +14,10 @@ export default {
handleBodyScrollLeft: PropTypes.func.isRequired, handleBodyScrollLeft: PropTypes.func.isRequired,
expander: PropTypes.object.isRequired, expander: PropTypes.object.isRequired,
}, },
inject: { setup() {
table: { default: () => ({}) }, return {
table: inject('table', {}),
};
}, },
render() { render() {
const { columns, fixed, tableClassName, handleBodyScrollLeft, expander, table } = this; const { columns, fixed, tableClassName, handleBodyScrollLeft, expander, table } = this;
@ -45,14 +49,7 @@ export default {
return ( return (
<div <div
key="headTable" key="headTable"
{...{ ref={fixed ? () => {} : saveRef('headTable')}
directives: [
{
name: 'ant-ref',
value: fixed ? () => {} : saveRef('headTable'),
},
],
}}
class={classNames(`${prefixCls}-header`, { class={classNames(`${prefixCls}-header`, {
[`${prefixCls}-hide-scrollbar`]: scrollbarWidth > 0, [`${prefixCls}-hide-scrollbar`]: scrollbarWidth > 0,
})} })}

100
components/vc-table/src/Table.jsx
View File

@ -1,10 +1,11 @@
/* eslint-disable camelcase */ /* eslint-disable camelcase */
import { provide } from 'vue';
import shallowequal from 'shallowequal'; import shallowequal from 'shallowequal';
import merge from 'lodash/merge'; import merge from 'lodash/merge';
import classes from 'component-classes'; import classes from 'component-classes';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { debounce } from './utils'; import { debounce, getDataAndAriaProps } from './utils';
import warning from '../../_util/warning'; import warning from '../../_util/warning';
import addEventListener from '../../vc-util/Dom/addEventListener'; import addEventListener from '../../vc-util/Dom/addEventListener';
import { Provider, create } from '../../_util/store'; import { Provider, create } from '../../_util/store';
@ -12,12 +13,13 @@ import ColumnManager from './ColumnManager';
import HeadTable from './HeadTable'; import HeadTable from './HeadTable';
import BodyTable from './BodyTable'; import BodyTable from './BodyTable';
import ExpandableTable from './ExpandableTable'; import ExpandableTable from './ExpandableTable';
import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util'; import { initDefaultProps, getOptionProps } from '../../_util/props-util';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
export default { export default {
name: 'Table', name: 'Table',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: initDefaultProps( props: initDefaultProps(
{ {
data: PropTypes.array, data: PropTypes.array,
@ -41,7 +43,7 @@ export default {
emptyText: PropTypes.any, emptyText: PropTypes.any,
scroll: PropTypes.object, scroll: PropTypes.object,
rowRef: PropTypes.func, rowRef: PropTypes.func,
getBodyWrapper: PropTypes.func, // getBodyWrapper: PropTypes.func,
components: PropTypes.shape({ components: PropTypes.shape({
table: PropTypes.any, table: PropTypes.any,
header: PropTypes.shape({ header: PropTypes.shape({
@ -144,19 +146,20 @@ export default {
// }, // },
created() { created() {
['rowClick', 'rowDoubleclick', 'rowContextmenu', 'rowMouseenter', 'rowMouseleave'].forEach( provide('table', this);
name => { // ['rowClick', 'rowDoubleclick', 'rowContextmenu', 'rowMouseenter', 'rowMouseleave'].forEach(
warning( // name => {
getListeners(this)[name] === undefined, // warning(
`${name} is deprecated, please use customRow instead.`, // getListeners(this)[name] === undefined,
); // `${name} is deprecated, please use customRow instead.`,
}, // );
); // },
// );
warning( // warning(
this.getBodyWrapper === undefined, // this.getBodyWrapper === undefined,
'getBodyWrapper is deprecated, please use custom components instead.', // 'getBodyWrapper is deprecated, please use custom components instead.',
); // );
// this.columnManager = new ColumnManager(this.columns, this.$slots.default) // this.columnManager = new ColumnManager(this.columns, this.$slots.default)
@ -541,11 +544,11 @@ export default {
}, },
render() { render() {
const props = getOptionProps(this); const props = { ...getOptionProps(this), ...this.$attrs };
const { columnManager, getRowKey } = this; const { columnManager, getRowKey } = this;
const prefixCls = props.prefixCls; const prefixCls = props.prefixCls;
const tableClassName = classNames(props.prefixCls, { const tableClassName = classNames(props.prefixCls, props.class, {
[`${prefixCls}-fixed-header`]: props.useFixedHeader || (props.scroll && props.scroll.y), [`${prefixCls}-fixed-header`]: props.useFixedHeader || (props.scroll && props.scroll.y),
[`${prefixCls}-scroll-position-left ${prefixCls}-scroll-position-right`]: [`${prefixCls}-scroll-position-left ${prefixCls}-scroll-position-right`]:
this.scrollPosition === 'both', this.scrollPosition === 'both',
@ -555,45 +558,38 @@ export default {
const hasLeftFixed = columnManager.isAnyColumnsLeftFixed(); const hasLeftFixed = columnManager.isAnyColumnsLeftFixed();
const hasRightFixed = columnManager.isAnyColumnsRightFixed(); const hasRightFixed = columnManager.isAnyColumnsRightFixed();
const dataAndAriaProps = getDataAndAriaProps(props);
const expandableTableProps = { const expandableTableProps = {
props: { ...props,
...props, columnManager,
columnManager, getRowKey,
getRowKey,
},
on: getListeners(this),
scopedSlots: {
default: expander => {
this.expander = expander;
return (
<div
{...{
directives: [
{
name: 'ant-ref',
value: this.saveTableNodeRef,
},
],
}}
class={tableClassName}
// style={props.style}
// id={props.id}
>
{this.renderTitle()}
<div class={`${prefixCls}-content`}>
{this.renderMainTable()}
{hasLeftFixed && this.renderLeftFixedTable()}
{hasRightFixed && this.renderRightFixedTable()}
</div>
</div>
);
},
},
}; };
return ( return (
<Provider store={this.store}> <Provider store={this.store}>
<ExpandableTable {...expandableTableProps} /> <ExpandableTable
{...expandableTableProps}
vSlots={{
default: expander => {
this.expander = expander;
return (
<div
ref={this.saveTableNodeRef}
class={tableClassName}
style={props.style}
id={props.id}
{...dataAndAriaProps}
>
{this.renderTitle()}
<div class={`${prefixCls}-content`}>
{this.renderMainTable()}
{hasLeftFixed && this.renderLeftFixedTable()}
{hasRightFixed && this.renderRightFixedTable()}
</div>
</div>
);
},
}}
/>
</Provider> </Provider>
); );
}, },

28
components/vc-table/src/TableCell.jsx
View File

@ -1,7 +1,8 @@
import { inject } from 'vue';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import get from 'lodash/get'; import get from 'lodash/get';
import classNames from 'classnames'; import classNames from 'classnames';
import { isValidElement, mergeProps } from '../../_util/props-util'; import { isValidElement } from '../../_util/props-util';
function isInvalidRenderCellText(text) { function isInvalidRenderCellText(text) {
return ( return (
@ -11,6 +12,7 @@ function isInvalidRenderCellText(text) {
export default { export default {
name: 'TableCell', name: 'TableCell',
inheritAttrs: false,
props: { props: {
record: PropTypes.object, record: PropTypes.object,
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
@ -21,8 +23,10 @@ export default {
expandIcon: PropTypes.any, expandIcon: PropTypes.any,
component: PropTypes.any, component: PropTypes.any,
}, },
inject: { setup() {
table: { default: () => ({}) }, return {
table: inject('table', {}),
};
}, },
methods: { methods: {
handleClick(e) { handleClick(e) {
@ -60,11 +64,7 @@ export default {
text = get(record, dataIndex); text = get(record, dataIndex);
} }
let tdProps = { let tdProps = {
props: {}, onClick: this.handleClick,
attrs: {},
on: {
click: this.handleClick,
},
}; };
let colSpan; let colSpan;
let rowSpan; let rowSpan;
@ -72,18 +72,14 @@ export default {
if (customRender) { if (customRender) {
text = customRender(text, record, index, column); text = customRender(text, record, index, column);
if (isInvalidRenderCellText(text)) { if (isInvalidRenderCellText(text)) {
tdProps.attrs = text.attrs || {}; tdProps = text.props || tdProps;
tdProps.props = text.props || {}; ({ colSpan, rowSpan } = tdProps);
tdProps.class = text.class;
tdProps.style = text.style;
colSpan = tdProps.attrs.colSpan;
rowSpan = tdProps.attrs.rowSpan;
text = text.children; text = text.children;
} }
} }
if (column.customCell) { if (column.customCell) {
tdProps = mergeProps(tdProps, column.customCell(record, index)); tdProps = { ...tdProps, ...column.customCell(record, index) };
} }
// Fix https://github.com/ant-design/ant-design/issues/1202 // Fix https://github.com/ant-design/ant-design/issues/1202
@ -118,7 +114,7 @@ export default {
if (column.ellipsis) { if (column.ellipsis) {
if (typeof text === 'string') { if (typeof text === 'string') {
tdProps.attrs.title = text; tdProps.title = text;
} else if (text) { } else if (text) {
// const { props: textProps } = text; // const { props: textProps } = text;
// if (textProps && textProps.children && typeof textProps.children === 'string') { // if (textProps && textProps.children && typeof textProps.children === 'string') {

8
components/vc-table/src/TableHeader.jsx
View File

@ -1,3 +1,4 @@
import { inject } from 'vue';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import TableHeaderRow from './TableHeaderRow'; import TableHeaderRow from './TableHeaderRow';
@ -42,13 +43,16 @@ function getHeaderRows({ columns = [], currentRow = 0, rows = [], isLast = true
export default { export default {
name: 'TableHeader', name: 'TableHeader',
inheritAttrs: false,
props: { props: {
fixed: PropTypes.string, fixed: PropTypes.string,
columns: PropTypes.array.isRequired, columns: PropTypes.array.isRequired,
expander: PropTypes.object.isRequired, expander: PropTypes.object.isRequired,
}, },
inject: { setup() {
table: { default: () => ({}) }, return {
table: inject('table', {}),
};
}, },
render() { render() {

24
components/vc-table/src/TableHeaderRow.jsx
View File

@ -1,9 +1,10 @@
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { connect } from '../../_util/store'; import { connect } from '../../_util/store';
import { mergeProps } from '../../_util/props-util';
const TableHeaderRow = { const TableHeaderRow = {
name: 'TableHeaderRow',
inheritAttrs: false,
props: { props: {
index: PropTypes.number, index: PropTypes.number,
fixed: PropTypes.string, fixed: PropTypes.string,
@ -15,8 +16,7 @@ const TableHeaderRow = {
customHeaderRow: PropTypes.func, customHeaderRow: PropTypes.func,
prefixCls: PropTypes.prefixCls, prefixCls: PropTypes.prefixCls,
}, },
name: 'TableHeaderRow', render() {
render(h) {
const { row, index, height, components, customHeaderRow, prefixCls } = this; const { row, index, height, components, customHeaderRow, prefixCls } = this;
const HeaderRow = components.header.row; const HeaderRow = components.header.row;
const HeaderCell = components.header.cell; const HeaderCell = components.header.cell;
@ -34,17 +34,11 @@ const TableHeaderRow = {
{row.map((cell, i) => { {row.map((cell, i) => {
const { column, isLast, children, className, ...cellProps } = cell; const { column, isLast, children, className, ...cellProps } = cell;
const customProps = column.customHeaderCell ? column.customHeaderCell(column) : {}; const customProps = column.customHeaderCell ? column.customHeaderCell(column) : {};
const headerCellProps = mergeProps( const headerCellProps = {
{ ...cellProps,
attrs: { ...customProps,
...cellProps, key: column.key || column.dataIndex || i,
}, };
},
{
...customProps,
key: column.key || column.dataIndex || i,
},
);
if (column.align) { if (column.align) {
headerCellProps.style = { ...customProps.style, textAlign: column.align }; headerCellProps.style = { ...customProps.style, textAlign: column.align };
@ -64,7 +58,7 @@ const TableHeaderRow = {
); );
if (typeof HeaderCell === 'function') { if (typeof HeaderCell === 'function') {
return HeaderCell(h, headerCellProps, children); return HeaderCell(headerCellProps, children);
} }
return <HeaderCell {...headerCellProps}>{children}</HeaderCell>; return <HeaderCell {...headerCellProps}>{children}</HeaderCell>;
})} })}

55
components/vc-table/src/TableRow.jsx
View File

@ -2,12 +2,13 @@ import classNames from 'classnames';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import { connect } from '../../_util/store'; import { connect } from '../../_util/store';
import TableCell from './TableCell'; import TableCell from './TableCell';
import { initDefaultProps, mergeProps, getStyle } from '../../_util/props-util'; import { initDefaultProps, findDOMNode } from '../../_util/props-util';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import warning from '../../_util/warning'; import warning from '../../_util/warning';
function noop() {} function noop() {}
const TableRow = { const TableRow = {
name: 'TableRow', name: 'TableRow',
inheritAttrs: false,
mixins: [BaseMixin], mixins: [BaseMixin],
props: initDefaultProps( props: initDefaultProps(
{ {
@ -140,7 +141,7 @@ const TableRow = {
getStyle() { getStyle() {
const { height, visible } = this; const { height, visible } = this;
let style = getStyle(this); let style = this.$attrs.style || {};
if (height) { if (height) {
style = { ...style, height }; style = { ...style, height };
} }
@ -153,7 +154,7 @@ const TableRow = {
}, },
saveRowRef() { saveRowRef() {
this.rowRef = this.$el; this.rowRef = findDOMNode(this);
const { isAnyColumnsFixed, fixed, expandedRow, ancestorKeys } = this; const { isAnyColumnsFixed, fixed, expandedRow, ancestorKeys } = this;
@ -196,7 +197,7 @@ const TableRow = {
const BodyRow = components.body.row; const BodyRow = components.body.row;
const BodyCell = components.body.cell; const BodyCell = components.body.cell;
let className = ''; let className = this.$attrs.class || '';
if (hovered) { if (hovered) {
className += ` ${prefixCls}-hover`; className += ` ${prefixCls}-hover`;
@ -246,35 +247,27 @@ const TableRow = {
customClassName, customClassName,
customClass, customClass,
); );
const rowPropEvents = rowProps.on || {}; const bodyRowProps = {
const bodyRowProps = mergeProps( ...rowProps,
{ ...rowProps, style }, style,
{ onClick: e => {
on: { this.onRowClick(e, rowProps.click);
click: e => {
this.onRowClick(e, rowPropEvents.click);
},
dblclick: e => {
this.onRowDoubleClick(e, rowPropEvents.dblclick);
},
mouseenter: e => {
this.onMouseEnter(e, rowPropEvents.mouseenter);
},
mouseleave: e => {
this.onMouseLeave(e, rowPropEvents.mouseleave);
},
contextmenu: e => {
this.onContextMenu(e, rowPropEvents.contextmenu);
},
},
class: rowClassName,
}, },
{ onDblclick: e => {
attrs: { this.onRowDoubleClick(e, rowProps.dblclick);
'data-row-key': rowKey,
},
}, },
); onMouseenter: e => {
this.onMouseEnter(e, rowProps.mouseenter);
},
onMouseleave: e => {
this.onMouseLeave(e, rowProps.mouseleave);
},
onContextmenu: e => {
this.onContextMenu(e, rowProps.contextmenu);
},
class: rowClassName,
'data-row-key': rowKey,
};
return <BodyRow {...bodyRowProps}>{cells}</BodyRow>; return <BodyRow {...bodyRowProps}>{cells}</BodyRow>;
}, },
}; };

13
components/vc-table/src/utils.js
View File

@ -85,3 +85,16 @@ export function remove(array, item) {
const last = array.slice(index + 1, array.length); const last = array.slice(index + 1, array.length);
return front.concat(last); return front.concat(last);
} }
/**
* Returns only data- and aria- key/value pairs
* @param {object} props
*/
export function getDataAndAriaProps(props) {
return Object.keys(props).reduce((memo, key) => {
if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
memo[key] = props[key];
}
return memo;
}, {});
}