代码:
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%" } ], } }
主要是通过style中旋转div实现的