From 3cb68f5ec6f981feef8f864ab191b196fa3a09fb Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 18 Jan 2020 16:14:42 +0800 Subject: [PATCH] perf: table rerender #1705 --- build/config.js | 2 +- components/_util/props-util.js | 6 ++++++ components/table/SelectionBox.jsx | 7 +++---- components/table/Table.jsx | 3 ++- components/table/createBodyRow.jsx | 3 ++- components/table/index.jsx | 5 +++-- components/vc-table/index.js | 5 +++-- components/vc-table/src/BaseTable.jsx | 17 ++++++++--------- components/vc-table/src/ExpandableTable.jsx | 6 +++--- components/vc-table/src/Table.jsx | 8 ++++---- 10 files changed, 35 insertions(+), 27 deletions(-) diff --git a/build/config.js b/build/config.js index 9d3a82e648..74c41ddf53 100644 --- a/build/config.js +++ b/build/config.js @@ -1,3 +1,3 @@ module.exports = { - devComponent: 'input', + devComponent: 'table', }; diff --git a/components/_util/props-util.js b/components/_util/props-util.js index f1d9a6b1f8..5ab8f07ddc 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -197,6 +197,12 @@ export function getEvents(child) { } return { ...events }; } + +// use getListeners instead this.$listeners +// https://github.com/vueComponent/ant-design-vue/issues/1705 +export function getListeners(context) { + return context.$vnode ? context.$vnode.componentOptions.listeners || {} : context.$listeners; +} export function getClass(ele) { let data = {}; if (ele.data) { diff --git a/components/table/SelectionBox.jsx b/components/table/SelectionBox.jsx index db26047262..636cfdac81 100644 --- a/components/table/SelectionBox.jsx +++ b/components/table/SelectionBox.jsx @@ -2,7 +2,7 @@ import Checkbox from '../checkbox'; import Radio from '../radio'; import { SelectionBoxProps } from './interface'; import BaseMixin from '../_util/BaseMixin'; -import { getOptionProps } from '../_util/props-util'; +import { getOptionProps, getListeners } from '../_util/props-util'; export default { name: 'SelectionBox', @@ -48,14 +48,13 @@ export default { render() { const { type, rowIndex, ...rest } = getOptionProps(this); - const { checked, $attrs, $listeners } = this; + const { checked } = this; const checkboxProps = { props: { checked, ...rest, }, - attrs: $attrs, - on: $listeners, + on: getListeners(this), }; if (type === 'radio') { checkboxProps.props.value = rowIndex; diff --git a/components/table/Table.jsx b/components/table/Table.jsx index e44d42f52e..d17cbf177b 100755 --- a/components/table/Table.jsx +++ b/components/table/Table.jsx @@ -17,6 +17,7 @@ import { filterEmpty, getAllProps, getComponentFromProp, + getListeners, } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; import { ConfigConsumerProps } from '../config-provider'; @@ -1117,7 +1118,7 @@ export default { expandIconAsCell, emptyText: !(loading.props && loading.props.spinning) && mergedLocale.emptyText, }, - on: this.$listeners, + on: getListeners(this), class: classString, }; return ; diff --git a/components/table/createBodyRow.jsx b/components/table/createBodyRow.jsx index ad2939723d..2b4df6d729 100644 --- a/components/table/createBodyRow.jsx +++ b/components/table/createBodyRow.jsx @@ -1,6 +1,7 @@ import PropTypes from '../_util/vue-types'; import { Store } from './createStore'; +import { getListeners } from '../_util/props-util'; const BodyRowProps = { store: Store, @@ -48,7 +49,7 @@ export default function createTableRow(Component = 'tr') { }; return ( - + {this.$slots.default} ); diff --git a/components/table/index.jsx b/components/table/index.jsx index 5181cf5f30..dd2a3faf0f 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -9,6 +9,7 @@ import { getSlotOptions, camelize, getSlots, + getListeners, } from '../_util/props-util'; import Base from '../base'; @@ -82,7 +83,7 @@ const Table = { }, }, render() { - const { $listeners, $slots, normalize, $scopedSlots } = this; + const { $slots, normalize, $scopedSlots } = this; const props = getOptionProps(this); const columns = props.columns ? this.updateColumns(props.columns) : normalize($slots.default); let { title, footer } = props; @@ -101,7 +102,7 @@ const Table = { footer, expandedRowRender, }, - on: $listeners, + on: getListeners(this), }; return ; }, diff --git a/components/vc-table/index.js b/components/vc-table/index.js index de60516f10..7f390e05d3 100644 --- a/components/vc-table/index.js +++ b/components/vc-table/index.js @@ -11,6 +11,7 @@ import { getSlotOptions, camelize, getSlots, + getListeners, } from '../_util/props-util'; const Table = { name: 'Table', @@ -52,7 +53,7 @@ const Table = { }, }, render() { - const { $listeners, $slots, normalize } = this; + const { $slots, normalize } = this; const props = getOptionProps(this); const columns = props.columns || normalize($slots.default); const tProps = { @@ -60,7 +61,7 @@ const Table = { ...props, columns, }, - on: $listeners, + on: getListeners(this), }; return ; }, diff --git a/components/vc-table/src/BaseTable.jsx b/components/vc-table/src/BaseTable.jsx index ae46b93b1c..987f16e561 100644 --- a/components/vc-table/src/BaseTable.jsx +++ b/components/vc-table/src/BaseTable.jsx @@ -4,7 +4,7 @@ import ColGroup from './ColGroup'; import TableHeader from './TableHeader'; import TableRow from './TableRow'; import ExpandableRow from './ExpandableRow'; -import { mergeProps } from '../../_util/props-util'; +import { mergeProps, getListeners } from '../../_util/props-util'; import { connect } from '../../_util/store'; function noop() {} const BaseTable = { @@ -49,16 +49,15 @@ const BaseTable = { prefixCls, childrenColumnName, rowClassName, - // rowRef, - $listeners: { - rowClick: onRowClick = noop, - rowDoubleclick: onRowDoubleClick = noop, - rowContextmenu: onRowContextMenu = noop, - rowMouseenter: onRowMouseEnter = noop, - rowMouseleave: onRowMouseLeave = noop, - }, customRow = noop, } = this.table; + const { + rowClick: onRowClick = noop, + rowDoubleclick: onRowDoubleClick = noop, + rowContextmenu: onRowContextMenu = noop, + rowMouseenter: onRowMouseEnter = noop, + rowMouseleave: onRowMouseLeave = noop, + } = getListeners(this.table); const { getRowKey, fixed, expander, isAnyColumnsFixed } = this; const rows = []; diff --git a/components/vc-table/src/ExpandableTable.jsx b/components/vc-table/src/ExpandableTable.jsx index 2662d356e1..c94e32a808 100644 --- a/components/vc-table/src/ExpandableTable.jsx +++ b/components/vc-table/src/ExpandableTable.jsx @@ -4,7 +4,7 @@ import { connect } from '../../_util/store'; import shallowEqual from 'shallowequal'; import TableRow from './TableRow'; import { remove } from './utils'; -import { initDefaultProps, getOptionProps } from '../../_util/props-util'; +import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util'; export const ExpandableTableProps = () => ({ expandIconAsCell: PropTypes.bool, @@ -227,7 +227,7 @@ const ExpandableTable = { }, render() { - const { data, childrenColumnName, $scopedSlots, $listeners } = this; + const { data, childrenColumnName, $scopedSlots } = this; const props = getOptionProps(this); const needIndentSpaced = data.some(record => record[childrenColumnName]); @@ -235,7 +235,7 @@ const ExpandableTable = { $scopedSlots.default && $scopedSlots.default({ props, - on: $listeners, + on: getListeners(this), needIndentSpaced, renderRows: this.renderRows, handleExpandChange: this.handleExpandChange, diff --git a/components/vc-table/src/Table.jsx b/components/vc-table/src/Table.jsx index 53079b4a1b..52f2ce3c25 100644 --- a/components/vc-table/src/Table.jsx +++ b/components/vc-table/src/Table.jsx @@ -10,7 +10,7 @@ import ColumnManager from './ColumnManager'; import HeadTable from './HeadTable'; import BodyTable from './BodyTable'; import ExpandableTable from './ExpandableTable'; -import { initDefaultProps, getOptionProps } from '../../_util/props-util'; +import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util'; import BaseMixin from '../../_util/BaseMixin'; export default { @@ -143,7 +143,7 @@ export default { ['rowClick', 'rowDoubleclick', 'rowContextmenu', 'rowMouseenter', 'rowMouseleave'].forEach( name => { warningOnce( - this.$listeners[name] === undefined, + getListeners(this)[name] === undefined, `${name} is deprecated, please use customRow instead.`, ); }, @@ -509,7 +509,7 @@ export default { render() { const props = getOptionProps(this); - const { $listeners, columnManager, getRowKey } = this; + const { columnManager, getRowKey } = this; const prefixCls = props.prefixCls; let className = props.prefixCls; if (props.useFixedHeader || (props.scroll && props.scroll.y)) { @@ -529,7 +529,7 @@ export default { columnManager, getRowKey, }, - on: { ...$listeners }, + on: getListeners(this), scopedSlots: { default: expander => { this.expander = expander;