代码：
代码语言：javascript复制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项目代码：
代码语言：javascript复制<a-tab-pane key="2" tab="收费公示" force-render>
<div class="shoufei" v-show="gongshiShow">
<h2>中共温州银行金融科技部一支部委员会党费公示</h2>
<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>
<div v-show="!gongshiShow" id="gongshi">
<h3>党费未公示</h3>
</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%"
}
],
}
}主要是通过style中旋转div实现的
