1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Antd给表格一个斜线分隔(通过css改变)

Antd给表格一个斜线分隔(通过css改变)

时间:2018-12-29 17:17:58

相关推荐

Antd给表格一个斜线分隔(通过css改变)

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;//定位// 旋转角度和定位距离根据实际情况调...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。