30秒带你学会ant-design-vue表格斜线分割

接了新需求说表头需要用切割线分割两个文案，二话不说直接开干 首先看html部分

   <a-table :columns="tableColumns" :data-source="tableData"
      <div slot="headerName">
        <div style="position:relative;width:120px;">
          <div style="text-align: right;">右边</div>
          <div style="text-align: left;">左边</div>
          <div class="lineTable"></div>
        </div>
      </div>
    </a-table>
    

然后看js部分

    columns: [
      {
        dataIndex: 'option',
        width: 160,
        slots: { title: 'headerName' }
      }
    ]

再看看css部分

.lineTable{
    content: '';
    position: absolute;
      width: 1px;
      height: 193px;
      top: -73px;
      left: 63px;
      background: #DBDBDB;
      display: block;
      -webkit-transform: rotate(-66deg);
      transform: rotate(-66deg);
  }

最终效果