巴林闲侠
2 years ago
8 changed files with 52 additions and 122 deletions
@ -1,106 +1,18 @@ |
|||||
import React, { useState, useEffect } from "react"; |
import React, { useState, useEffect } from "react"; |
||||
import { Table } from "@douyinfe/semi-ui"; |
import { Skeleton } from "@douyinfe/semi-ui"; |
||||
|
|
||||
|
|
||||
export function skeletonScreen(line, columns) { |
export function skeletonScreen() { |
||||
const data = () => { |
return <> |
||||
let str = []; |
<Skeleton.Title style={{width: "95%",height:24,margin:"8px 20px"}} /> |
||||
for (let i = 0; i < line; i++) { |
<Skeleton.Title style={{width: "80%",height:28,margin:"16px 20px"}} /> |
||||
if (i == line - 1) { |
<Skeleton.Title style={{width: "50%",height:28,margin:"16px 20px"}} /> |
||||
str.push({ |
<Skeleton.Title style={{width: "60%",height:28,margin:"16px 20px"}} /> |
||||
createUserId: ( |
<Skeleton.Title style={{width: "90%",height:28,margin:"16px 20px"}} /> |
||||
<div |
<Skeleton.Title style={{width: "70%",height:28,margin:"16px 20px"}} /> |
||||
style={{ |
<Skeleton.Title style={{width: "50%",height:28,margin:"16px 20px"}} /> |
||||
width: 30, |
<Skeleton.Title style={{width: "40%",height:28,margin:"16px 20px"}} /> |
||||
height: 14, |
<Skeleton.Title style={{width: "60%",height:28,margin:"16px 20px"}} /> |
||||
background: "rgba(217, 216, 216, 0.3)", |
<Skeleton.Title style={{width: "40%",height:28,margin:"16px 20px"}} /> |
||||
}} |
</> |
||||
></div> |
|
||||
), |
|
||||
operation: ( |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 50, |
|
||||
height: 14, |
|
||||
background: "rgba(217, 216, 216, 0.3)", |
|
||||
}} |
|
||||
></div> |
|
||||
), |
|
||||
}); |
|
||||
} else { |
|
||||
str.push({ |
|
||||
createUserId: ( |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 30, |
|
||||
height: 14, |
|
||||
background: "rgba(217, 216, 216, 0.3)", |
|
||||
}} |
|
||||
></div> |
|
||||
), |
|
||||
operation: ( |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 50, |
|
||||
height: 14, |
|
||||
background: "rgba(217, 216, 216, 0.3)", |
|
||||
}} |
|
||||
></div> |
|
||||
), |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
return str; |
|
||||
}; |
|
||||
const column = () => { |
|
||||
let str = []; |
|
||||
for (let i = 0; i < columns; i++) { |
|
||||
if (i == columns - 1) { |
|
||||
str.push({ |
|
||||
title: ( |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 30, |
|
||||
height: 14, |
|
||||
background: "rgba(217, 216, 216, 0.5)", |
|
||||
}} |
|
||||
></div> |
|
||||
), |
|
||||
dataIndex: "operation", |
|
||||
key: i, |
|
||||
width: "20%", |
|
||||
}); |
|
||||
} else { |
|
||||
str.push({ |
|
||||
title: ( |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 30, |
|
||||
height: 14, |
|
||||
background: "rgba(217, 216, 216, 0.5)", |
|
||||
}} |
|
||||
></div> |
|
||||
), |
|
||||
dataIndex: "createUserId", |
|
||||
key: i, |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
return str; |
|
||||
}; |
|
||||
|
|
||||
return ( |
|
||||
<> |
|
||||
<Table |
|
||||
columns={column()} |
|
||||
dataSource={data()} |
|
||||
bordered={false} |
|
||||
empty="暂无数据" |
|
||||
style={{ |
|
||||
padding: "0px 20px", |
|
||||
}} |
|
||||
pagination={false} |
|
||||
/> |
|
||||
</> |
|
||||
); |
|
||||
} |
} |
||||
|
Loading…
Reference in new issue