|
@@ -4,15 +4,16 @@ import { Table } from "antd";
|
|
import ImageLazy from "../ImageLazy";
|
|
import ImageLazy from "../ImageLazy";
|
|
|
|
|
|
type Props = {
|
|
type Props = {
|
|
- yHeight: number;
|
|
|
|
- list: any;
|
|
|
|
- columnsTemp: any;
|
|
|
|
- total?: number;
|
|
|
|
|
|
+ yHeight: number; //设置表格的高度
|
|
|
|
+ list: any; //表格数据
|
|
|
|
+ columnsTemp: any; //表格展示
|
|
|
|
+ total?: number; //总数
|
|
pageNum?: number;
|
|
pageNum?: number;
|
|
pageSize?: number;
|
|
pageSize?: number;
|
|
pagingInfo?: any | boolean;
|
|
pagingInfo?: any | boolean;
|
|
onChange?: (pageNum: number, pageSize: number) => void;
|
|
onChange?: (pageNum: number, pageSize: number) => void;
|
|
lastBtn?: any;
|
|
lastBtn?: any;
|
|
|
|
+ classKey?: string; //一个组件多次使用的时候要传递,分别设置style
|
|
};
|
|
};
|
|
|
|
|
|
function MyTable({
|
|
function MyTable({
|
|
@@ -20,8 +21,8 @@ function MyTable({
|
|
list,
|
|
list,
|
|
columnsTemp,
|
|
columnsTemp,
|
|
total,
|
|
total,
|
|
- pageNum,
|
|
|
|
- pageSize,
|
|
|
|
|
|
+ pageNum = 1,
|
|
|
|
+ pageSize = 10,
|
|
pagingInfo = {
|
|
pagingInfo = {
|
|
showQuickJumper: true,
|
|
showQuickJumper: true,
|
|
position: ["bottomCenter"],
|
|
position: ["bottomCenter"],
|
|
@@ -29,13 +30,15 @@ function MyTable({
|
|
},
|
|
},
|
|
onChange,
|
|
onChange,
|
|
lastBtn = [],
|
|
lastBtn = [],
|
|
|
|
+ classKey = "",
|
|
}: Props) {
|
|
}: Props) {
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
const dom = document.querySelector(
|
|
const dom = document.querySelector(
|
|
- "#MyTable .ant-table-body"
|
|
|
|
|
|
+ `.MyTable${classKey} .ant-table-body`
|
|
) as HTMLDivElement;
|
|
) as HTMLDivElement;
|
|
|
|
+
|
|
if (dom) dom.style.height = yHeight + "px";
|
|
if (dom) dom.style.height = yHeight + "px";
|
|
- }, [yHeight]);
|
|
|
|
|
|
+ }, [classKey, yHeight]);
|
|
|
|
|
|
// 页码变化
|
|
// 页码变化
|
|
const paginationChange = useCallback(
|
|
const paginationChange = useCallback(
|
|
@@ -49,6 +52,8 @@ function MyTable({
|
|
|
|
|
|
const dataChangeFu = useCallback(
|
|
const dataChangeFu = useCallback(
|
|
(v: any) => {
|
|
(v: any) => {
|
|
|
|
+ const nullTxt = "(空)";
|
|
|
|
+
|
|
/**
|
|
/**
|
|
* index:序号
|
|
* index:序号
|
|
* txt:正常数据
|
|
* txt:正常数据
|
|
@@ -59,14 +64,15 @@ function MyTable({
|
|
|
|
|
|
const obj = {
|
|
const obj = {
|
|
index: (_: any, __: any, index: number) =>
|
|
index: (_: any, __: any, index: number) =>
|
|
- index + 1 + (pageNum! - 1) * pageSize!,
|
|
|
|
- txt: (item: any) => item[v[2]] || "(空)",
|
|
|
|
|
|
+ index + 1 + (pageNum - 1) * pageSize,
|
|
|
|
+ txt: (item: any) => item[v[2]] || nullTxt,
|
|
img: (item: any) => (
|
|
img: (item: any) => (
|
|
<div className="tableImgAuto">
|
|
<div className="tableImgAuto">
|
|
<ImageLazy width={60} height={60} src={item.thumb} />
|
|
<ImageLazy width={60} height={60} src={item.thumb} />
|
|
</div>
|
|
</div>
|
|
),
|
|
),
|
|
- txtChange: (item: any) => Reflect.get(v[3], item[v[2]]) || "(空)",
|
|
|
|
|
|
+ txtChange: (item: any) =>
|
|
|
|
+ Reflect.get(v[3], item[v[2]]) || v[4] || nullTxt,
|
|
text: (item: any) =>
|
|
text: (item: any) =>
|
|
item[v[2]] ? (
|
|
item[v[2]] ? (
|
|
item[v[2]].length >= v[3] ? (
|
|
item[v[2]].length >= v[3] ? (
|
|
@@ -77,7 +83,7 @@ function MyTable({
|
|
item[v[2]]
|
|
item[v[2]]
|
|
)
|
|
)
|
|
) : (
|
|
) : (
|
|
- "(空)"
|
|
|
|
|
|
+ nullTxt
|
|
),
|
|
),
|
|
};
|
|
};
|
|
|
|
|
|
@@ -97,8 +103,7 @@ function MyTable({
|
|
|
|
|
|
return (
|
|
return (
|
|
<Table
|
|
<Table
|
|
- id="MyTable"
|
|
|
|
- className={styles.MyTable}
|
|
|
|
|
|
+ className={`${styles.MyTable} MyTable${classKey}`}
|
|
scroll={{ y: yHeight }}
|
|
scroll={{ y: yHeight }}
|
|
dataSource={list}
|
|
dataSource={list}
|
|
columns={[...columns, ...lastBtn]}
|
|
columns={[...columns, ...lastBtn]}
|