✨点击行高亮

Author: liyuan-meng

src/components/c-table/demos/light-click-row.md

@@ -0,0 +1,62 @@
+---
+order: 1 title: CTable desc: 自定义表格行背景色
+---
+
+```jsx
+import React, { useRef, useEffect, useState } from 'react';
+import { CTable } from 'cloud-react';
+
+const data = [
+  { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng' },
+  { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33	', creator: 'jiaojiao.diao' },
+  { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run' },
+  { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan' },
+  { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo' },
+];
+
+const columns = [
+  { title: '活动ID', dataIndex: 'id' },
+  { title: '活动名称', dataIndex: 'name' },
+  {
+    title: '创建时间', dataIndex: 'createTime', render: val => {
+      return <CTable.TimeTpl value={val} />
+    }
+  },
+  { title: '创建人', dataIndex: 'creator' }
+];
+
+export default function CTableDemo() {
+  const ref = useRef();
+  const [activeKey, setActiveKey] = useState(null);
+
+  const onClickRow = evt => {
+    if (evt.target?.parentNode?.dataset?.rowKey) {
+      setActiveKey(evt.target?.parentNode?.dataset?.rowKey);
+    }
+  }
+
+  useEffect(() => {
+    ref.current.addEventListener('click', onClickRow);
+
+    return () => {
+      ref.current.removeEventListener('click', onClickRow);
+    }
+  }, [])
+
+  return (
+    <div id="demo" ref={ref} className="cloud-table-demo">
+      <CTable
+        rowClassName={(row) => {
+          if (row.id === activeKey) {
+            // 可以自定义类，在业务中自定义色值
+            return "cloud-table-row-lighted";
+          }
+          return row.id;
+        }}
+        columnData={columns}
+        ajaxData={{ totals: data.length, data }}
+      />
+    </div>
+  );
+}
+```

src/components/c-table/demos/style/index.less

@@ -30,4 +30,11 @@
       }
     }
   }
+
+  .cloud-table-row-lighted td {
+    background: #fff9db!important;
+    &:hover {
+      background: #fff9db!important;
+    }
+  }
 }

src/components/c-table/index.md

@@ -231,6 +231,10 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
 | typeConfig.formatValue            | 格式化 value             | function                 | -                |
 
 
+**注意事项**
+
+列表数据中包含 `disabled` 和 `checked` 关键字，若不启用 禁用行 和 选中行 功能，请勿将该字段传递到表格数据中！
+
 ### 二、代码演示
 
 ### 基础表格
@@ -303,6 +307,9 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
 
 <embed src="@components/c-table/demos/light-row.md" /> 
 
+### 点击行高亮
+<embed src="@components/c-table/demos/light-click-row.md" />
+
 ### 表格排序
 
 <embed src="@components/c-table/demos/sort-with-page.md" /> 
@@ -343,6 +350,14 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
 
 <embed src="@components/c-table/demos/sticky.md" />
 
+### 表格懒加载
+
+<embed src="@components/c-table/demos/lazyload.md" />
+
+### 分体式表格（灵活）
+
+<embed src="@components/c-table/demos/splitTable.md" />
+
 ### 标准化表格-数值类型
 
 <embed src="@components/c-table/demos/uniform_number.md" />