react 代码:
const [
columns,
setColums
] = useState([
// 主要代码
title: <div style={{
"position": "relative"
}}>
<div style={{ "text-align": "right" }}>参数</div>
<div style={{ "text-align": "left" }}>变量</div>
<div style={{
"content": "",
"position": "absolute",
"width": "1px",
"height": "140px",
"top": "-48px",
"left": "42px",
"backgroundColor": "#1A3A50",
"display": "block",
"transform": "rotate(-57deg)"
}}>
</div>
</div>,
dataIndex: "indexName",
key: "indexName",
width: "9%"
])
`
发一个完整的案例:
vue antd 项目代码:
虽然框架不一样,但是实现方式是一样的。
<a-tab-pane key="2" tab="收费公示" force-render>
<div class="shoufei">
<p style="margin-bottom:20px">
公示时间:{{ detailInfo.pubStartdate }}至{{detailInfo.pubEnddate}}
</p>
<!-- 表格 -->
<div id="tableID">
<a-table
bordered
:data-source="dataSource"
:columns="columns"
></a-table>
</div>
</div>
</a-tab-pane>
data(){
return{
columns: [
{
title: <Tooltip title="月份">月份</Tooltip>,
dataIndex: "mouth",
align: "center",
width: "20%"
// scopedSlots: { customRender: "name" }
},
{
width: "20%",
children: [
{
dataIndex: "yjje",
align: "center"
},
{
align: "center",
dataIndex: "sjje"
}
],
title: (
<div
style={{
position: "relative"
}}
>
<div style={{ "margin-left": "-200px" }}>应缴金额</div>
<div style={{ "margin-left": "200px" }}>实缴金额</div>
<div
style={{
content: "",
position: "absolute",
width: " 1px",
height: "320px",
top: "-139px",
left: "128px",
backgroundColor: "#ded9d9",
display: "block",
transform: "rotate(77deg)"
}}
></div>
</div>
)
},
// {
// title: "实缴金额",
// dataIndex: "sjje",
// align: "center"
// },
{
// title: "应缴人数",
children: [
{
dataIndex: "yjrs",
align: "center"
},
{
dataIndex: "sjrs",
align: "center"
}
],
width: "20%",
title: (
<div
style={{
position: "relative"
}}
>
<div style={{ "margin-left": "-200px" }}>应缴人数</div>
<div style={{ "margin-left": "200px" }}>实缴人数</div>
<div
style={{
content: "",
position: "absolute",
width: " 1px",
height: "320px",
top: "-139px",
left: "128px",
backgroundColor: "#ded9d9",
display: "block",
transform: "rotate(77deg)"
}}
></div>
</div>
)
// align: "center"
},
// {
// title: "实缴人数",
// dataIndex: "sjrs",
// align: "center"
// },
{
title: <Tooltip title="已上交金额">已上交金额</Tooltip>,
dataIndex: "ysjje",
align: "center",
width: "20%"
}
],
}
}
实现方式:
写一个空div,设置长200px,高1px。再通过css旋转 transform: rotate(77deg)。然后定位上去,最好是给这个空的div加一个父盒子,利用子绝父相。
核心代码
transform: rotate(77deg);//旋转
position: absolute;//定位
// 旋转角度和定位距离根据实际情况调...