docs: [CTable] 添加 DEMO，虚拟列表

ShuyunFF2E · Dec 5, 2024 · be36510 · be36510
1 parent ae82442
commit be36510
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -123,6 +123,7 @@
     "rimraf": "3.0.2",
     "rollup-plugin-postcss": "4.0.2",
     "umi-lint": "2.0.2",
+    "virtuallist-antd": "^0.8.0-beta.1",
     "yargs": "17.7.2"
   },
   "husky": {

diff --git a/src/components/c-table/demos/virtual-list.md b/src/components/c-table/demos/virtual-list.md
@@ -0,0 +1,107 @@
+---
+order: 1
+title: CTable
+desc: 虚拟列表
+---
+
+```jsx
+/**
+ * title: 虚拟列表（性能原因，不支持单选和多选）
+ * desc: 使用三方库 virtuallist-antd：https://www.npmjs.com/package/virtuallist-antd
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { CTable, Pagination, Select, Form } from 'cloud-react';
+import { VList } from "virtuallist-antd";
+
+const fetchData = ({ pageNum, pageSize }) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        data: new Array(pageSize).fill(1).map((item, index) => (
+          { id: 121410327 + pageNum + index, name: `手机号优先继续发送${pageNum + index}`, createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: 12222, orderNum: '33,342', status: index % 2 === 0 ? '生效': '失效' }
+        )),
+        totals: 100
+      })
+    }, 500)
+  })
+}
+
+const fetchStatusList = () => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([
+        { label: '生效', value: 1 },
+        { label: '失效', value: 2 }
+      ])
+    }, 500)
+  })
+}
+
+const columns = [
+  { title: '活动ID', dataIndex: 'id', width: 230, fixed: 'left' },
+  {
+    title: '活动名称', dataIndex: 'name', width: 240, render: val => {
+      return <CTable.TextTpl value={val} />
+    }
+  },
+  {
+    title: '创建时间', dataIndex: 'createTime', width: 240, render: val => {
+      return <CTable.TimeTpl value={val} />
+    }
+  },
+  {
+    title: '人数',
+    dataIndex: 'num',
+    align: 'right',
+    width: 120,
+    render: val => <CTable.NumberTpl value={val} precision={0} />
+  },
+  { title: '创建人', dataIndex: 'creator', width: 260 }
+];
+
+export default function CTableDemo() {
+  const [queryParams, setQueryParams] = useState({
+    pageNum: 1,
+    pageSize: 1000
+  })
+  const [loading, setLoading] = useState(false);
+  const [ajaxData, setAjaxData] = useState({ data: [], totals: 0 });
+
+  useEffect(() => {
+    setLoading(true);
+    fetchData(queryParams).then(res => {
+      setAjaxData({
+        data: res.data,
+        totals: res.totals
+      })
+    }).finally(() => {
+      setLoading(false);
+    })
+  }, []);
+
+  return (
+    <div>
+      <p style={{ marginBottom: 15 }}>共{ajaxData.data.length}条数据</p>
+      <CTable
+        style={{ height: 400 }}
+        columnData={columns}
+        ajaxData={ajaxData}
+        loadingOpts={{
+          loading,
+          layer: true
+        }}
+        rowKey="id"
+        rcTableConfig={{
+          components: useMemo(() => {
+            return VList({
+              height: 400,
+              vid: "first"
+            });
+          }, [])
+        }}
+      />
+    </div>
+  );
+}
+```
diff --git a/src/components/c-table/index.js b/src/components/c-table/index.js
@@ -122,7 +122,12 @@ class CTable extends Component {
       typeof prevProps.ajaxData === 'object' &&
       this.props.ajaxData !== prevProps.ajaxData
     ) {
-      this.loadData();
+      this.loadData((res) => {
+        if (!Object.keys(this.leafNodesMap || {}).length) {
+          this.init();
+          this.props.onLoadGridAfter(res);
+        }
+      });
     }
     if (this.props.checkedData !== prevProps.checkedData) {
       this.init();
@@ -498,8 +503,8 @@ class CTable extends Component {
         const parentKey = this.getKeyFieldVal(leafNodesMap[key].parentNode);
         // 如果节点的所有子节点选中 并且 节点的父节点的所有子节点没有全部选中
         if (
-          isEveryChecked(leafNodesMap[key].childNodes) &&
-          (!parentKey || !isEveryChecked(leafNodesMap[parentKey].childNodes))
+          isEveryChecked(leafNodesMap[key]?.childNodes) &&
+          (!parentKey || !isEveryChecked(leafNodesMap[parentKey]?.childNodes))
         ) {
           selectedNodeList.push(leafNodesMap[key].node);
         }
@@ -540,8 +545,8 @@ class CTable extends Component {
       // 不是已选节点 && （没有子节点被选中 或者 全部子节点都被选中）
       if (
         !isCheckedNode &&
-        (!isSomeChecked(this.leafNodesMap[key].childNodes) ||
-          isEveryChecked(this.leafNodesMap[key].childNodes))
+        (!isSomeChecked(this.leafNodesMap[key]?.childNodes) ||
+          isEveryChecked(this.leafNodesMap[key]?.childNodes))
       ) {
         if (typeof this.leafNodesMap[key] === 'object') {
           this.leafNodesMap[key]?.childNodes?.forEach((node) => {
@@ -606,7 +611,7 @@ class CTable extends Component {
       Object.keys(currentLeafNodesMap).forEach((key) => {
         if (this.leafNodesMap[key]) {
           if (typeof this.leafNodesMap[key] !== 'object') {
-            currentLeafNodesMap[key].childNodes.forEach((item) => {
+            currentLeafNodesMap[key]?.childNodes.forEach((item) => {
               Object.assign(item, { checked: true });
             });
             this.leafNodesMap[key] = currentLeafNodesMap[key];
@@ -877,7 +882,7 @@ class CTable extends Component {
               if (this.isRowDisabled(row)) {
                 classNames.push(`${tablePrefixCls}-row-disabled`);
               }
-              if (lightCheckedRow && isEveryChecked(targetNode.childNodes)) {
+              if (lightCheckedRow && isEveryChecked(targetNode?.childNodes)) {
                 classNames.push(`${tablePrefixCls}-row-select`);
               }
               return `${classNames.join(' ')} ${rowClassName(row)}`;

diff --git a/src/components/c-table/index.md b/src/components/c-table/index.md
@@ -367,6 +367,10 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
 
 <embed src="@components/c-table/demos/lazyload.md" />
 
+### 虚拟列表
+
+<embed src="@components/c-table/demos/virtual-list.md" />
+
 ### 列设置
 <embed src="@components/c-table/demos/config-column-basic.md" />
 <embed src="@components/c-table/demos/config-column.md" />

diff --git a/src/components/c-table/js/column.js b/src/components/c-table/js/column.js
@@ -8,6 +8,57 @@ import Popover from '../../popover';
 import { isEveryChecked, isSomeChecked } from '../util';
 import { tablePrefixCls } from '../constant';
 
+// function RowCheckbox({ isDisabled, data, updateLeafNodesMap }) {
+//   const [checked, setChecked] = useState(false);
+//   const [indeterminate, setIndeterminate] = useState(false);
+//
+//   useEffect(() => {
+//     if (data?.childNodes) {
+//       const isChecked = !!isEveryChecked(data.childNodes);
+//       const isIndeterminate = !isChecked && isSomeChecked(data.childNodes);
+//       setChecked(isChecked);
+//       setIndeterminate(isIndeterminate);
+//     }
+//   }, [data]);
+//
+//   return (
+//     <Checkbox
+//       checked={checked}
+//       indeterminate={indeterminate}
+//       disabled={isDisabled}
+//       onChange={(_checked) => {
+//         updateLeafNodesMap(_checked);
+//         setChecked(_checked);
+//         setIndeterminate(false);
+//       }}
+//     />
+//   );
+// }
+
+// function RowRadio({ radioVal, data, isDisabled, onChange }) {
+//   const [checked, setChecked] = useState(false);
+//
+//   useEffect(() => {
+//     if (data?.childNodes) {
+//       const isChecked = !!isEveryChecked(data.childNodes);
+//       console.log(isChecked);
+//       setChecked(isChecked);
+//     }
+//   }, [data]);
+//
+//   return (
+//     <Radio
+//       disabled={isDisabled}
+//       value={radioVal}
+//       checked={checked}
+//       onChange={() => {
+//         onChange();
+//         setChecked(true);
+//       }}
+//     />
+//   );
+// }
+
 export default class Column {
   constructor(_this) {
     this._this = _this;
@@ -248,16 +299,15 @@ export default class Column {
               onConfirmClick={this.onFilterConfirm}
               onVisibleChange={visible => {
                 _this.setState({ lineHeightFilter: visible }, () => {
-                    this.setColumnData();
-                })
+                  this.setColumnData();
+                });
               }}
             >
               <Icon
                 className={`filter-icon ${
                   (_this.state.filterValue.length || _this.state.lineHeightFilter) && 'has-filter-value'
                 }
-                `
-              }
+                `}
                 type="filter"
               />
             </Popover>

diff --git a/src/components/c-table/js/propType.js b/src/components/c-table/js/propType.js
@@ -83,6 +83,7 @@ export const propTypes = {
   noScroll: PropTypes.bool,
   rcTableConfig: PropTypes.bool,
   configColumnType: PropTypes.oneOf(['default', 'complex']),
+  // unControlledCheck: PropTypes.bool,
 };
 
 export const defaultProps = {
@@ -165,4 +166,5 @@ export const defaultProps = {
   noScroll: false,
   rcTableConfig: {},
   configColumnType: 'default',
+  // unControlledCheck: false,
 };