diff --git a/antdv-demo b/antdv-demo index 2bead0607..dd3e7a802 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 2bead0607865ddfbb49f958507d55249b9b0f3c4 +Subproject commit dd3e7a8023c35c197ff9e3fd754d6d4f8a3fc852 diff --git a/breakChange-2.x.md b/breakChange-2.x.md index fa4b9fe4c..850bc1591 100644 --- a/breakChange-2.x.md +++ b/breakChange-2.x.md @@ -105,3 +105,11 @@ dateRender (current: moment.Moment, today: moment.Moment) => ({current: moment.Moment, today: moment.Moment}) monthCellContentRender (date, locale) => ({date, locale}) + +## table + +customRender( text, record, index, column ); => customRender({ text, record, index, column }); + +expandedRowRender(record, index, indent, expanded) => expandedRowRender({ record, index, indent, expanded }) + +filterIcon(filtered, column) => filterIcon({ filtered, column }) diff --git a/components/table/Table.jsx b/components/table/Table.jsx index 19438d0a1..641299e6d 100755 --- a/components/table/Table.jsx +++ b/components/table/Table.jsx @@ -1,4 +1,4 @@ -import { inject } from 'vue'; +import { inject, markRaw } from 'vue'; import CaretUpFilled from '@ant-design/icons-vue/CaretUpFilled'; import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled'; import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table'; @@ -137,6 +137,7 @@ export default { }, data() { + this.vcTable = null; // this.columns = props.columns || normalizeColumns(props.children) const props = getOptionProps(this); warning( @@ -155,7 +156,7 @@ export default { sFilters: this.getDefaultFilters(props.columns), sPagination: this.getDefaultPagination(this.$props), pivot: undefined, - sComponents: createComponents(this.components), + sComponents: markRaw(createComponents(this.components)), filterDataCnt: 0, }; }, @@ -947,7 +948,7 @@ export default { ) : null; }, renderSelectionBox(type) { - return (_, record, index) => { + return ({ record, index }) => { const rowKey = this.getRecordKey(record, index); // 从 1 开始 const props = this.getCheckboxPropsByItem(record, index); const handleChange = e => { diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx index f87a2601b..e2fe2f34d 100755 --- a/components/table/filterDropdown.jsx +++ b/components/table/filterDropdown.jsx @@ -27,6 +27,7 @@ export default { }), data() { + this.neverShown = false; const visible = 'filterDropdownVisible' in this.column ? this.column.filterDropdownVisible : false; this.preProps = { ...getOptionProps(this) }; @@ -214,7 +215,7 @@ export default { const filtered = selectedKeys && selectedKeys.length > 0; let filterIcon = column.filterIcon; if (typeof filterIcon === 'function') { - filterIcon = filterIcon(filtered, column); + filterIcon = filterIcon({ filtered, column }); } const dropdownIconClass = classNames({ [`${prefixCls}-selected`]: 'filtered' in column ? column.filtered : filtered, @@ -299,9 +300,8 @@ export default { onDeselect={this.setSelectedKeys} selectedKeys={originSelectedKeys && originSelectedKeys.map(val => val.toString())} getPopupContainer={getPopupContainer} - > - {this.renderMenus(column.filters)} - + children={this.renderMenus(column.filters)} + >
{locale.filterConfirm} diff --git a/components/vc-dropdown/src/Dropdown.jsx b/components/vc-dropdown/src/Dropdown.jsx index 0cab28cc4..70a00361a 100644 --- a/components/vc-dropdown/src/Dropdown.jsx +++ b/components/vc-dropdown/src/Dropdown.jsx @@ -116,7 +116,7 @@ export default { }, getPopupDomNode() { - return this.trigger.getPopupDomNode(); + return this.triggerRef.getPopupDomNode(); }, getOpenClassName() { @@ -133,8 +133,12 @@ export default { const rootNode = findDOMNode(this); if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) { overlayNode.style.minWidth = `${rootNode.offsetWidth}px`; - if (this.trigger && this.trigger._component && this.trigger._component.alignInstance) { - this.trigger._component.alignInstance.forceAlign(); + if ( + this.triggerRef && + this.triggerRef._component && + this.triggerRef._component.alignInstance + ) { + this.triggerRef._component.alignInstance.forceAlign(); } } } @@ -148,7 +152,7 @@ export default { : children; }, saveTrigger(node) { - this.trigger = node; + this.triggerRef = node; }, }, diff --git a/components/vc-table/src/BaseTable.jsx b/components/vc-table/src/BaseTable.jsx index 44440e422..7e58f19c5 100644 --- a/components/vc-table/src/BaseTable.jsx +++ b/components/vc-table/src/BaseTable.jsx @@ -139,7 +139,7 @@ const BaseTable = { }, render() { - const { sComponents: components, prefixCls, scroll, data, getBodyWrapper } = this.table; + const { sComponents: components, prefixCls, scroll, data } = this.table; const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props; const tableStyle = {}; @@ -160,9 +160,6 @@ const BaseTable = { let body; if (hasBody) { body = {this.renderRows(data, 0)}; - if (getBodyWrapper) { - body = getBodyWrapper(body); - } } const columns = this.getColumns(); return ( diff --git a/components/vc-table/src/ExpandableTable.jsx b/components/vc-table/src/ExpandableTable.jsx index f418254b3..0d0a12e75 100644 --- a/components/vc-table/src/ExpandableTable.jsx +++ b/components/vc-table/src/ExpandableTable.jsx @@ -169,7 +169,9 @@ const ExpandableTable = { return { props: { colSpan: colCount }, children: - fixed !== 'right' ? expandedRowRender(record, index, indent, expanded) : ' ', + fixed !== 'right' + ? expandedRowRender({ record, index, indent, expanded }) + : ' ', }; }, }, diff --git a/components/vc-table/src/Table.jsx b/components/vc-table/src/Table.jsx index e2dc9e9ab..6bb764773 100644 --- a/components/vc-table/src/Table.jsx +++ b/components/vc-table/src/Table.jsx @@ -1,5 +1,5 @@ /* eslint-disable camelcase */ -import { provide } from 'vue'; +import { provide, markRaw } from 'vue'; import shallowequal from 'shallowequal'; import merge from 'lodash/merge'; import classes from 'component-classes'; @@ -89,21 +89,23 @@ export default { this.preData = [...this.data]; return { columnManager: new ColumnManager(this.columns), - sComponents: merge( - { - table: 'table', - header: { - wrapper: 'thead', - row: 'tr', - cell: 'th', + sComponents: markRaw( + merge( + { + table: 'table', + header: { + wrapper: 'thead', + row: 'tr', + cell: 'th', + }, + body: { + wrapper: 'tbody', + row: 'tr', + cell: 'td', + }, }, - body: { - wrapper: 'tbody', - row: 'tr', - cell: 'td', - }, - }, - this.components, + this.components, + ), ), }; }, diff --git a/components/vc-table/src/TableCell.jsx b/components/vc-table/src/TableCell.jsx index 6dfa64a3c..556129d44 100644 --- a/components/vc-table/src/TableCell.jsx +++ b/components/vc-table/src/TableCell.jsx @@ -70,7 +70,7 @@ export default { let rowSpan; if (customRender) { - text = customRender(text, record, index, column); + text = customRender({ text, record, index, column }); if (isInvalidRenderCellText(text)) { tdProps = text.props || tdProps; ({ colSpan, rowSpan } = tdProps); diff --git a/examples/App.vue b/examples/App.vue index 86d18f10e..fded2e31f 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -4,7 +4,7 @@