From efb714e5722fc377292600d17ce378e87f6b0aa6 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 23 Jul 2020 22:52:04 +0800
Subject: [PATCH] feat: update table
---
antdv-demo | 2 +-
breakChange-2.x.md | 8 ++++++
components/table/Table.jsx | 7 +++--
components/table/filterDropdown.jsx | 8 +++---
components/vc-dropdown/src/Dropdown.jsx | 12 +++++---
components/vc-table/src/BaseTable.jsx | 5 +---
components/vc-table/src/ExpandableTable.jsx | 4 ++-
components/vc-table/src/Table.jsx | 32 +++++++++++----------
components/vc-table/src/TableCell.jsx | 2 +-
examples/App.vue | 2 +-
examples/index.js | 6 ++++
11 files changed, 54 insertions(+), 34 deletions(-)
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)}
- </Menu>
+ children={this.renderMenus(column.filters)}
+ ></Menu>
<div class={`${prefixCls}-dropdown-btns`}>
<a class={`${prefixCls}-dropdown-link confirm`} onClick={this.handleConfirm}>
{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 = <BodyWrapper class={`${prefixCls}-tbody`}>{this.renderRows(data, 0)}</BodyWrapper>;
- 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 @@
</div>
</template>
<script>
-import demo from '../antdv-demo/docs/date-picker/demo/index';
+import demo from '../antdv-demo/docs/table/demo/ajax';
export default {
components: {
diff --git a/examples/index.js b/examples/index.js
index c2d39c4dc..056e6f309 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -36,6 +36,9 @@ import {
TimePicker,
Calendar,
DatePicker,
+ Table,
+ Tag,
+ Divider,
notification,
message,
} from 'ant-design-vue';
@@ -89,4 +92,7 @@ app
.use(TimePicker)
.use(Calendar)
.use(DatePicker)
+ .use(Table)
+ .use(Tag)
+ .use(Divider)
.mount('#app');