feat: update table

antdv-demo

@@ -1 +1 @@
-Subproject commit 2bead0607865ddfbb49f958507d55249b9b0f3c4
+Subproject commit dd3e7a8023c35c197ff9e3fd754d6d4f8a3fc852

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 })

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 => {

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}

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;
     },
   },
 

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 (

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 })
+                  : ' ',
             };
           },
         },

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,
+        ),
       ),
     };
   },

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);

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: {

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');