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

75 阅读1分钟

在这里插入图片描述
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;//定位
// 旋转角度和定位距离根据实际情况调...