Merge pull request #728 from ShuyunFF2E/mly-cTable-0825

表格问题修复（表格标题：问号提示、排序、筛选同时存在时，样式优化）
ShuyunFF2E · Oct 31, 2023 · 3be0b08 · 3be0b08
2 parents f640ae1 + 437eead
commit 3be0b08
Show file tree

Hide file tree

Showing 36 changed files with 1,172 additions and 654 deletions.
diff --git a/src/components/c-table/css/basic.less b/src/components/c-table/css/basic.less
@@ -64,6 +64,24 @@
     }
   }
 
+  td {
+    &.padding-32 {
+      padding-right: 32px;
+    }
+    &.padding-34 {
+      padding-right: 34px;
+    }
+    &.padding-54 {
+      padding-right: 54px;
+    }
+    &.padding-52 {
+      padding-right: 52px;
+    }
+    &.padding-74 {
+      padding-right: 74px;
+    }
+  }
+
   tr:not(.@{tablePrefixCls}-expanded-row):hover td {
     background: @gray-2;
     transition: all 0.3s;
@@ -445,19 +463,36 @@
   }
 
   .title-container {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &.align-right {
+      justify-content: end;
+    }
+
     // 排序
     .sort-icon-container {
+      position: relative;
+      top: -4px;
       display: inline-flex;
       flex-direction: column;
       align-items: center;
       cursor: pointer;
 
+      .sort-up-icon {
+        height: 7px;
+      }
+
+      .sort-down-icon {
+        height: 7px;
+      }
+
       &:hover {
-        &:not(.cell-align-right):after {
+        &:after {
           position: absolute;
-          top: 50%;
-          transform: translate(0, -50%);
-          right: 11px;
+          top: 4px;
+          left: -1px;
           content: '';
           display: inline-block;
           width: 16px;
@@ -470,7 +505,7 @@
       &.cell-align-right {
         .sort-up-icon,
         .sort-down-icon {
-          right: 0;
+          //right: 0;
         }
       }
 
@@ -488,8 +523,8 @@
 
       .sort-up-icon,
       .sort-down-icon {
-        position: absolute;
-        right: 12px;
+        //position: absolute;
+        //right: 12px;
         font-size: 14px;
         color: #949494;
         display: inline-block;
@@ -498,11 +533,11 @@
       }
 
       .sort-up-icon {
-        top: calc(50% - 13px);
+        //top: calc(50% - 13px);
       }
 
       .sort-down-icon {
-        top: calc(50% - 6px);
+        //top: calc(50% - 6px);
       }
     }
 
@@ -511,20 +546,21 @@
       .sort-icon-container {
         &:hover {
           &:not(.cell-align-right):after {
-            right: 35px;
+            //right: 35px;
           }
         }
         .sort-up-icon,
         .sort-down-icon {
-          right: 36px;
+          //right: 36px;
         }
       }
     }
 
     .filter-icon {
-      position: absolute;
-      right: 14px;
-      top: 13px;
+      height: 17px;
+      //position: absolute;
+      //right: 14px;
+      //top: 13px;
       //top: 50%;
       //transform: translate(0, -50%);
       cursor: pointer;
@@ -545,17 +581,17 @@
     align-items: center;
 
     .title-tip-icon {
-      //position: relative;
-      //top: 1px;
-      margin: 0 4px;
+      height: 17px;
       color: @gray-6;
     }
 
     &.title-with-tip-right {
+      gap: 4px;
     }
 
     &.title-with-tip-left {
       flex-direction: row-reverse;
+      gap: 4px;
     }
   }
 

diff --git a/src/components/c-table/demos/basic.md b/src/components/c-table/demos/basic.md
@@ -1,36 +1,48 @@
 ---
-order: 1
-title: CTable
-desc: 默认表格
+order: 1 title: CTable desc: 默认表格
 ---
 
 ```jsx
 import React from 'react';
 import { CTable } from 'cloud-react';
 
 const data = [
-  { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
+  { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12222' },
   { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33	', creator: 'jiaojiao.diao', num: '198' },
-  { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
-  { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
-  { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
+  { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: 1232 },
+  { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: 12122112 },
+  { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: 1000000 },
 ];
 
 const columns = [
   { title: '活动ID', dataIndex: 'id', width: 130 },
-  { title: '活动名称', dataIndex: 'name', width: 140 },
-  { title: '创建时间', dataIndex: 'createTime', width: 140 },
-  { title: '人数', dataIndex: 'num', align: 'right', width: 120 },
+  {
+    title: '活动名称', dataIndex: 'name', width: 140, render: val => {
+      return <CTable.TextTpl value={val} />
+    }
+  },
+  {
+    title: '创建时间', dataIndex: 'createTime', width: 140, 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: 130 }
 ];
 
 export default function CTableDemo() {
-	return (
-        <CTable
-           style={{ height: 400 }}
-           columnData={columns}
-           ajaxData={{ totals: data.length, data }}
-        />
-	);
+  return (
+    <CTable
+      style={{ height: 400 }}
+      columnData={columns}
+      ajaxData={{ totals: data.length, data }}
+    />
+  );
 }
 ```
diff --git a/src/components/c-table/demos/bordered.md b/src/components/c-table/demos/bordered.md
@@ -17,10 +17,18 @@ const data = [
 ];
 
 const columns = [
-    { title: '活动ID', dataIndex: 'id', align: 'left' },
-    { title: '活动名称', dataIndex: 'name', align: 'left' },
-    { title: '创建时间', dataIndex: 'createTime', align: 'left' },
-    { title: '创建人', dataIndex: 'creator', align: 'left' }
+  { title: '活动ID', dataIndex: 'id', width: 130 },
+  {
+    title: '活动名称', dataIndex: 'name', width: 140, render: val => {
+      return <CTable.TextTpl value={val} />
+    }
+  },
+  {
+    title: '创建时间', dataIndex: 'createTime', width: 140, render: val => {
+      return <CTable.TimeTpl value={val} />
+    }
+  },
+  { title: '创建人', dataIndex: 'creator', width: 130 }
 ];
 
 export default function CTableDemo() {

diff --git a/src/components/c-table/demos/checkbox.md b/src/components/c-table/demos/checkbox.md
@@ -1,7 +1,5 @@
 ---
-order: 9
-title: CTable
-desc: 分页
+order: 9 title: CTable desc: 分页
 ---
 
 ```jsx
@@ -23,15 +21,24 @@ const columns = [
     title: item => {
       return <span style={{ display: 'flex', alignItems: 'center' }}>
                 <span style={{ marginRight: 5 }}>活动ID</span>
-                <Tooltip content="说明说明"><Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="question-circle"/></Tooltip>
+                <Tooltip content="说明说明"><Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }}
+                                              type="question-circle" /></Tooltip>
             </span>;
     },
     dataIndex: 'id',
     align: 'left'
   },
-    { title: '活动名称', dataIndex: 'name', align: 'left' },
-    { title: '创建时间', dataIndex: 'createTime', align: 'left' },
-    { title: '创建人', dataIndex: 'creator', align: 'left' }
+  {
+    title: '活动名称', dataIndex: 'name', render: val => {
+      return <CTable.TextTpl value={val} />
+    }
+  },
+  {
+    title: '创建时间', dataIndex: 'createTime', render: val => {
+      return <CTable.TimeTpl value={val} />
+    }
+  },
+  { title: '创建人', dataIndex: 'creator', align: 'left' }
 ];
 
 export default function CTableDemo() {
@@ -116,16 +123,16 @@ export default function CTableDemo() {
         checkedData={checkedData}
         columnData={columns}
         ajaxData={(params) => {
-            return isEmpty ? {
-              total: 0,
-              list: []
-            } : {
-              total: data.length,
-              list: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
-            };
+          return isEmpty ? {
+            total: 0,
+            list: []
+          } : {
+            total: data.length,
+            list: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+          };
         }}
         onCheckedAfter={checkedData => {
-            setCheckedData(checkedData);
+          setCheckedData(checkedData);
         }}
         loadingOpts={{
           loading: isLoading,

diff --git a/src/components/c-table/demos/checkbox1.md b/src/components/c-table/demos/checkbox1.md
@@ -1,7 +1,5 @@
 ---
-order: 9
-title: CTable
-desc: 分页
+order: 9 title: CTable desc: 分页
 ---
 
 ```jsx
@@ -22,15 +20,24 @@ const columns = [
     title: item => {
       return <span style={{ display: 'flex', alignItems: 'center' }}>
                 <span style={{ marginRight: 5 }}>活动ID</span>
-                <Tooltip content="说明说明"><Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="question-circle"/></Tooltip>
+                <Tooltip content="说明说明"><Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }}
+                                              type="question-circle" /></Tooltip>
             </span>;
     },
     dataIndex: 'id',
     align: 'left'
   },
-    { title: '活动名称', dataIndex: 'name', align: 'left' },
-    { title: '创建时间', dataIndex: 'createTime', align: 'left' },
-    { title: '创建人', dataIndex: 'creator', align: 'left' }
+  {
+    title: '活动名称', dataIndex: 'name', render: val => {
+      return <CTable.TextTpl value={val} />
+    }
+  },
+  {
+    title: '创建时间', dataIndex: 'createTime', render: val => {
+      return <CTable.TimeTpl value={val} />
+    }
+  },
+  { title: '创建人', dataIndex: 'creator', align: 'left' }
 ];
 
 export default function CTableDemo() {
@@ -60,10 +67,13 @@ export default function CTableDemo() {
           }
         }}
         ajaxData={(params) => {
-            return { total: data.length, list: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum))) };
+          return {
+            total: data.length,
+            list: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+          };
         }}
         onCheckedAfter={checkedData => {
-            setCheckedData(checkedData);
+          setCheckedData(checkedData);
         }}
       />
     </div>

diff --git a/src/components/c-table/demos/custom-column-icon-link.md b/src/components/c-table/demos/custom-column-icon-link.md
@@ -1,7 +1,5 @@
 ---
-order: 5
-title: CTable
-desc: 自定义列模板
+order: 5 title: CTable desc: 自定义列模板
 ---
 
 ```jsx
@@ -10,11 +8,11 @@ import { CTable } from 'cloud-react';
 import headerImg from './header.jpg';
 
 const data = [
-  { id: '121410327', name: '手机号优先继续发送1手机号优先继续发送1手机号优先继续...', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
-  { id: '121410328', name: 'ouid疲劳度3ouid疲劳度3ouid疲劳度3ouid疲劳度3', createTime: '2021/12/13 15:47:33	', creator: 'jiaojiao.diao', num: '198' },
-  { id: '121410329', name: '继续发送手机1继续发送手机1继续发送手机1继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
-  { id: '121408294', name: '继续发送手机2继续发送手机2继续发送手机2继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
-  { id: '121407191', name: '继续发送手机3继续发送手机3继续发送手机3继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
+  { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12222' },
+  { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33	', creator: 'jiaojiao.diao', num: '198' },
+  { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: 1232 },
+  { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: 12122112 },
+  { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: 1000000 },
 ];
 
 const columns = [
@@ -30,8 +28,17 @@ const columns = [
     )
   },
   { title: '活动ID', dataIndex: 'id' },
-  { title: '创建时间', dataIndex: 'createTime' },
-  { title: '人数', dataIndex: 'num', align: 'right' },
+  {
+    title: '创建时间', dataIndex: 'createTime', render: val => {
+      return <CTable.TimeTpl value={val} />
+    }
+  },
+  {
+    title: '人数',
+    dataIndex: 'num',
+    align: 'right',
+    render: val => <CTable.NumberTpl value={val} precision={0} />
+  },
   { title: '创建人', dataIndex: 'creator' }
 ];