前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Antd给表格一个斜线分隔(通过css改变)

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

作者头像
江咏之
发布2022-06-16 09:36:20
7680
发布2022-06-16 09:36:20
举报
文章被收录于专栏:技术社区
在这里插入图片描述
在这里插入图片描述

代码:

代码语言: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>
代码语言:javascript
复制
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实现的

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-04-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档