Vue ElementUI table实现表格斜线分隔线

2024-04-02 19:04:59 238人浏览薄情痞子

摘要

本文实例为大家分享了Vue ElementUI table给表格一个斜线分隔线的具体代码，供大家参考，具体内容如下效果：实现：通过改css样式实现 1、去掉第一个单元格的下边

本文实例为大家分享了Vue ElementUI table给表格一个斜线分隔线的具体代码，供大家参考，具体内容如下

效果：

实现：

通过改css样式实现

1、去掉第一个单元格的下边框/
2、第一列第一个单元格和第二个单元格的伪元素设置绝对定位，宽度设成1px,高度根据自己表格调整
3、通过旋转两个单元格伪元素，并设置旋转起始点，使两个伪元素旋转到重合位置，达到斜线的效果

代码：

1、html

<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>

2、css

.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; 
    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; 
    bottom: 0;
    right: 0;
    background-color: grey;
    opacity: 0.3;
    display: block;
    transform: rotate(-54deg); 
    transform-origin: bottom;
    // background:red;
  }

3、js

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
            }
          ]
        }
      ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: Vue ElementUI table实现表格斜线分隔线

本文链接: https://lsjlt.com/news/143309.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341