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-tablebordered: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: (<divstyle={{position: "relative"}}><div style={{"margin-left": "-200px" }}>应缴金额</div><div style={{"margin-left": "200px" }}>实缴金额</div><divstyle={{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: (<divstyle={{position: "relative"}}><div style={{"margin-left": "-200px" }}>应缴人数</div><div style={{"margin-left": "200px" }}>实缴人数</div><divstyle={{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;//定位// 旋转角度和定位距离根据实际情况调...