Antd给表格一个斜线分隔（通过css改变）

江一铭

发布于 2022-06-16 01:36:20

80100

代码可运行

文章被收录于专栏：技术社区技术社区

运行总次数：0

代码可运行

代码：

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项目代码：

<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%"
        }
      ],
	}
}