element表格去掉表头的实现方法

 更新时间:2021年10月01日 08:58:47   作者:https://blog.csdn.net/qq_34169240/article/details/109327797  
本文主要介绍了element表格去掉表头的实现方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

文档提示用属性show-header

 <el-table
            :data="tableData1"
            :span-method="arraySpanMethod"
            border
            :show-header="status"
              <el-table-column
              prop="lable"
              label=""
              width="180">
            </el-table-column>
           /el-table >

!!!重点就是要:show-header动态控制

Element-ui table去掉所有边框

el-table 加 class="customer-no-border-table"

/*去掉表格单元格边框*/
   .customer-no-border-table th{
     border:none;
   }
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none;
}
 /*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{
     border: none;
   }
  /*头部边框*/
   .customer-no-border-table thead tr th.is-leaf{
     border: 0px solid #EBEEF5;
     border-right: none;
   }
.customer-no-border-table thead tr th:nth-last-of-type(2){
  border-right: 0px solid #EBEEF5;
}
 /*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
     width: 0;
   }
.customer-no-border-table::before{
  width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
.customer-no-border-table .el-table__header tr th{
  background: #fff;
  color: #333333 ;
  padding: 3px ;
  fontWeight: 550 ;
  height: 36px ;
  border: 0px;
  font-size: 15px;
}

到此这篇关于element表格去掉表头的实现方法的文章就介绍到这了,更多相关element表格去掉表头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决vue-element-admin安装依赖npm install报错问题

    解决vue-element-admin安装依赖npm install报错问题

    这篇文章主要介绍了解决vue-element-admin安装依赖npm install报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue实现一个无限加载列表功能

    Vue实现一个无限加载列表功能

    这篇文章主要介绍了Vue实现一个无限加载列表功能,需要的朋友可以参考下
    2018-11-11
  • Vue 两个字段联合校验之修改密码功能的实现

    Vue 两个字段联合校验之修改密码功能的实现

    本文以校验两次密码的一致性应用,给出两个可变属性值的字段之间的联合校验的典型解决方案,通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现,需要的朋友一起看看吧
    2021-07-07
  • 一文带你简单理解Vue的data为何只能是函数

    一文带你简单理解Vue的data为何只能是函数

    如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,下面这篇文章主要给大家介绍了关于简单理解Vue的data为啥只能是函数的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue实现前端按钮组件权限管理

    vue实现前端按钮组件权限管理

    这篇文章主要为大家介绍了vue实现前端按钮组件权限管理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue路由跳转传递参数的方式总结

    vue路由跳转传递参数的方式总结

    在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码,需要的朋友们可以学习下。
    2020-05-05
  • Vue冷门技巧递归组件实践示例详解

    Vue冷门技巧递归组件实践示例详解

    这篇文章主要为大家介绍了Vue冷门技巧递归组件实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue中swiper开启loop后,点击事件不响应的解决方案

    vue中swiper开启loop后,点击事件不响应的解决方案

    这篇文章主要介绍了vue中swiper开启loop后,点击事件不响应的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 详解lottie动画在vue中的应用

    详解lottie动画在vue中的应用

    Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库,它使用 Bodymovin 解析导出为 JSON 的 Adobe After Effects 动画,下面我们就来看看它在vue中的是如何应用的吧
    2023-12-12
  • Vue 处理表单input单行文本框的实例代码

    Vue 处理表单input单行文本框的实例代码

    这篇文章主要Vue 处理表单input单行文本框的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05

最新评论