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 求指教