vxe-table 編輯表格+組合表頭：通過css實現斜線表頭

效果預覽

 

 

 

實現原理

通過改css樣式實現

1. 去掉第一個單元格的下邊框
2. 第一列第一個單元格和第二個單元格的偽元素設置絕對定位，寬度設成1px,高度根據自己表格調整
3. 通過旋轉兩個單元格偽元素，並設置旋轉起始點，使兩個偽元素旋轉到重合位置，達到斜線的效果

HTML

<vxe-table
          border
          resizable
          show-overflow
          :data="tableData"
          align="center"
          :edit-config="{trigger: 'click', mode: 'cell'}">
           
            <vxe-colgroup field="group0" title="投產類別" align="right">
              <vxe-column type="seq" width="110" title="序號" align="left"></vxe-column>
            </vxe-colgroup>
           
           <vxe-colgroup field="group1" title="編織資源組" >
           
          <vxe-column field="name" title="Name" :edit-render="{autofocus: '.vxe-input--inner'}">
            <template #edit="{ row }">
              <vxe-input v-model="row.name" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="role" title="Role" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.role" type="text" placeholder="請輸入昵稱"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="date13" title="Week" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.date13" type="week" placeholder="請選擇日期" transfer></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="address" title="Address" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.address" type="text"></vxe-input>
            </template>
          </vxe-column>
          </vxe-colgroup>
          
          
        </vxe-table>

CSS

  .vxe-table--header thead tr:first-of-type th:first-of-type{
    background: #F8F8F9;

  }
   .vxe-table--header thead tr:first-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 75px; /*這里需要自己調整，根據td的寬度和高度*/
    top: 0;
    left: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-48deg); /*這里需要自己調整，根據線的位置*/
    transform-origin: top;
  }
  .vxe-table--header thead tr:last-of-type th:first-of-type:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 75px; /*這里需要自己調整，根據td的寬度和高度*/
    bottom: 0;
    right: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-49deg); /*這里需要自己調整，根據線的位置*/
    transform-origin: bottom;
  }

DATA

tableData: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', address: 'Shenzhen', date12: '', date13: '' },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Designer', address: 'Guangzhou', date12: '', date13: '2020-08-20' },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'Test', address: 'Shanghai', date12: '2020-09-10', date13: '' },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', address: 'Shenzhen', date12: '', date13: '2020-12-04' },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop',address: 'Shanghai', date12: '2020-09-20', date13: '' },
                { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', address: 'Shenzhen', date12: '', date13: '' },
                { id: 10007, name: 'Test7', nickname: 'T7', role: 'Develop', address: 'Shenzhen', date12: '2020-01-02', date13: '2020-09-20' },
                { id: 10008, name: 'Test8', nickname: 'T8', role: 'PM',address: 'Shenzhen', date12: '', date13: '' }
              ]

 

參考Vue ElementUI table通過改css樣式實現斜線表頭

https://blog.csdn.net/qq_42006353/article/details/84135914

樣式上還有點bug 求指教