如何去掉el-table中自带的边框线

 更新时间:2025年01月06日 10:40:06   作者:边洛洛  
文章介绍了如何去掉Element UI中el-table组件自带的边框线,通常情况下,el-table没有添加border属性,但仍然会出现边框线,可能的原因包括ElementUI的默认样式或表格的某些内置样式,感兴趣的朋友跟随小编一起看看吧

1.问题:el-table中自带的边框线

2.解决后的效果:

3.分析:明明在el-table中没有添加border,但是会出现边框线.
可能的原因: 由 Element UI 的默认样式或者表格的某些内置样式引起的。比如,<el-table> 会通过 border-collapseborder-spacing 等属性影响边框的显示。

4.具体代码

样式修改

/* 去掉表格整体左边和上边的线 */
.el-table--group, .el-table--border {
  border: none
}
 /* 去掉表格整体最下面的边框 */
.el-table::before {
  width: 0;
  height: 0;
}
/* 去掉表格整体最右边的边框 */
.el-table--group::after, .el-table--border::after {
  width: 0;
  height: 0;
}
/* 去掉表格横向的边框线 */
::v-deep .el-table th.el-table__cell.is-leaf, 
::v-deep .el-table td.el-table__cell {
    border: none;
}
/* 去掉表头上的边框线 */
::v-deep .el-table--border th.el-table__cell {
    border: none;
} 
/* 去掉表格纵向的边框线 */
.el-table--border .el-table__cell {
    border-right: none;
} 
/* 表头高度 */
::v-deep(.el-table th.el-table__cell) {
  min-height: 0 !important; 
  padding: 0 !important;
  height: 23px !important;
  line-height: 23px;
}

渲染模板 

<el-table :data="tempData" :header-cell-style="{background: '#fff'}" :header-row-style="{height: '23px'}">
          <el-table-column label="排名" prop="rank" align="center" width="50"/>
          <el-table-column label="注册号" prop="num" align="center" width="70"/>
          <el-table-column label="姓名" prop="name">
            <template slot-scope="scope">
              <el-input v-if="isEditing" v-model="scope.row.name" @input="updateData(scope.row)"/>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="代表队" prop="team" align="center" width="140"></el-table-column>
          <el-table-column label="组" prop="series" align="center">
            <el-table-column v-for="(item, index) in 6" :key="index" :label="`${index + 1}`" align="center" width="70">
              <template slot-scope="scope">
                <!-- 判断是否编辑状态 -->
                <el-input
                  v-if="isEditing"
                  v-model="scope.row.series[index]"
                  @input="updateData(scope.row)"             
                />
                <span v-else>{{ scope.row.series[index] }}</span>
              </template>
            </el-table-column>
          </el-table-column>          
          <el-table-column label="总计" prop="total" align="center" width="80">
            <template slot-scope="scope">
              <el-input v-if="isEditing" v-model="scope.row.total" @input="updateData(scope.row)"/>
              <span v-else>{{ scope.row.total }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remarks" align="center" width="130"></el-table-column>  
      </el-table>

到此这篇关于如何去掉el-table中自带的边框线的文章就介绍到这了,更多相关去掉el-table边框线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 嵌套路由使用总结(推荐)

    Vue 嵌套路由使用总结(推荐)

    这篇文章主要介绍了Vue 嵌套路由使用总结,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue如何判断安卓还是IOS

    vue如何判断安卓还是IOS

    这篇文章主要介绍了vue如何判断安卓还是IOS,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 深入探究Vue中$nextTick的实现原理

    深入探究Vue中$nextTick的实现原理

    这篇文章主要为大家详细介绍Vue中$nextTick的实现原理,文中的示例代码讲解详细,对我们深入了解Vue有一定的帮助,需要的小伙伴可以参考一下
    2023-06-06
  • vue实现全选功能

    vue实现全选功能

    这篇文章主要为大家详细介绍了vue实现全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue使用Pinia轻松实现状态管理

    Vue使用Pinia轻松实现状态管理

    pinia,一个基于Vue3的状态管理库,它可以帮助开发人员管理Vue应用程序的状态,本文主要为大家介绍了Pinia的用法,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06
  • vue3修改link标签默认icon无效问题详解

    vue3修改link标签默认icon无效问题详解

    这篇文章主要介绍了vue3修改link标签默认icon无效问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 解决vue app.js/vender.js过大优化启动页

    解决vue app.js/vender.js过大优化启动页

    这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 图文详解keep-alive如何清除缓存

    图文详解keep-alive如何清除缓存

    vue项目中常常会用到keepalive来作缓存,在应付基本要求上能够说很是方便,可是遇到同一个页面,根据条件不一样,分别缓存或者不缓存,就有些麻烦了,这篇文章主要给大家介绍了关于keep-alive如何清除缓存的相关资料,需要的朋友可以参考下
    2021-08-08
  • 一文详解vue生命周期在uniapp中的用法

    一文详解vue生命周期在uniapp中的用法

    在uniapp中,vue的生命周期的用法基本都得以保留,但是对于特殊的需求以及特殊的情况,uniapp还引入了一些特有的生命周期钩子,本文给大家详细介绍了vue生命周期在uniapp中的用法,感兴趣的朋友可以参考下
    2024-01-01
  • vue中提示$index is not defined错误的解决方式

    vue中提示$index is not defined错误的解决方式

    这篇文章主要介绍了vue中提示$index is not defined错误的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论