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

 更新时间:2022年03月21日 15:43:35   作者:前端江太公  
这篇文章主要为大家详细介绍了Vue ElementUI table实现表格斜线分隔线,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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; /*这里需要自己调整,根据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;
    // 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
            }
          ]
        }
      ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue 指令之气泡提示效果的实现代码

    vue 指令之气泡提示效果的实现代码

    这篇文章主要介绍了vue 指令之气泡提示效果的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • 详解ElementUI之表单验证、数据绑定、路由跳转

    详解ElementUI之表单验证、数据绑定、路由跳转

    本篇文章主要介绍了ElementUI之表单验证、数据绑定、路由跳转,非常具有实用价值,需要的朋友可以参考下
    2017-06-06
  • 用了babel还需要polyfill吗原理解析

    用了babel还需要polyfill吗原理解析

    这篇文章主要为大家介绍了用了babel是否还需要polyfill的原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue实现nav导航栏的方法

    vue实现nav导航栏的方法

    这篇文章主要为大家详细介绍了vue项目nav导航栏的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • vue cli 3.0下配置开发环境下的sourcemap问题

    vue cli 3.0下配置开发环境下的sourcemap问题

    这篇文章主要介绍了vue cli 3.0下配置开发环境下的sourcemap问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 浅谈vue 多个变量同时赋相同值互相影响

    浅谈vue 多个变量同时赋相同值互相影响

    这篇文章主要介绍了浅谈vue 多个变量同时赋相同值互相影响,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue-cli配置环境变量的方法

    vue-cli配置环境变量的方法

    本篇文章主要介绍了vue-cli配置环境变量的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vuex中actions优雅处理接口请求的方法

    Vuex中actions优雅处理接口请求的方法

    在项目开发中,如果使用到了 vuex,通常我会将所有的接口请求单独用一个文件管理,这篇文章主要介绍了Vuex中actions如何优雅处理接口请求,业务逻辑写在 actions 中,本文给大家分享完整流程需要的朋友可以参考下
    2022-11-11
  • Vue实现炫酷的代码瀑布流背景

    Vue实现炫酷的代码瀑布流背景

    这篇文章主要为大家详细介绍了Vue实现炫酷的代码瀑布流背景,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • VueJS全面解析

    VueJS全面解析

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。这篇文章主要介绍了VueJS全面解析的相关资料,需要的朋友可以参考下
    2016-11-11

最新评论