table 斜线表头

最新推荐文章于 2024-09-06 21:09:23 发布

爱吃瓜子的小松鼠

最新推荐文章于 2024-09-06 21:09:23 发布

阅读量558

点赞数

分类专栏： elementui 文章标签： html vue.js javascript

原文链接：https://blog.csdn.net/qq_42006353/article/details/84135914

版权

elementui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现原理:

去掉第一个单元格的下边框
第一列第一个和第二个单元格的伪元素设置绝对定位, 宽度1px,高度视情况而定
通过旋转两个单元格的伪元素,设置旋转起点,使两个伪元素重合,达到斜线的效果

<el-table
    :data="tableData3"
    style="width: 100%">
    <el-table-column
      label="医疗机构"
      align="right"
      width="150">
       <el-table-column
        prop="name"
        label="收费项目"
        width="120">
      </el-table-column>
    </el-table-column>
      <el-table-column
        v-for="(item,index) of mechanism"
        :label="item"
        align="center"
        :key="item"
        width="120">
        <el-table-column
          label="次数"
          align="center"
          width="120">
          <template slot-scope="scope">
            {{scope.row.mechanism[index].frequency}}
        </template>
        </el-table-column>
        <el-table-column
          label="费用"
          align="center"
          width="120">
          <template slot-scope="scope">
            {{scope.row.mechanism[index].cost}}
        </template>
        </el-table-column>
      </el-table-column>

  </el-table>

.el-table thead.is-group th {
    background: none;
  }
  .el-table thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none;
  }
  .el-table thead.is-group 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(-53deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
  }
  .el-table thead.is-group 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(-54deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: bottom;
  }

mechanism: ['医疗机构A', '医疗机构B', '医疗机构C', '医疗机构D'],
      tableData3: [
        {
          name: '项目A',
          mechanism: [
            {
              frequency: 8,
              cost: 1000
            },
            {
              frequency: 9,
              cost: 2000
            },
            {
              frequency: 10,
              cost: 3000
            },
            {
              frequency: 11,
              cost: 4000
            }
          ]
        },
        {
          name: '项目B',
          mechanism: [
            {
              frequency: 3,
              cost: 3001
            },
            {
              frequency: 4,
              cost: 2002
            },
            {
              frequency: 5,
              cost: 2003
            },
            {
              frequency: 6,
              cost: 2004
            }
          ]
        }
      ]