element-ui的表格去除表格线

直接上css代码就行

.tab-le /deep/  .el-table, .el-table__expanded-cell {
        background-color: transparent;
        border: none;
 }
 .tab-le /deep/ .el-table tr {
       background-color: transparent!important;
     border: none;
 }
 .tab-le /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
       background-color: transparent;
     border: none;
 }
 .tab-le /deep/  .el-table__row>td{
       border: none;
 }
 /* 清除底部横线 */
 .el-table::before {
       height: 0px;
 }
.tab-le >>> .el-table th.is-leaf {
  /* 去除上边框 */
    border: none;
}

.tab-le是自定义表格外层盒子的类名。不加的话,/deep/会报错

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在实际开发中,经常需要对表格的数据进行筛选和排序。如果表格的数据太多,可能会导致页面加载缓慢,影响用户体验。因此,我们可以通过隐藏一些不必要的列来优化页面性能。 在element-ui表格组件中,我们可以通过设置column的属性“visible”来控制列的显示和隐藏。对于需要隐藏的列,我们只需要将其对应的column的visible属性设置为false即可,元素将不会被渲染出来,从而达到了隐藏的效果。具体实现步骤如下: 1.在表头中定义需要隐藏的列的column,例如name列: ``` <el-table-column prop="name" label="姓名" :visible="false"></el-table-column> ``` 2.在表格数据中去掉对应的name字段 ``` [{ age: 28, sex: '男' }, { age: 25, sex: '女' }] ``` 这样,在页面中,name列就不会被渲染出来。 另,在实际开发中,有时候需要在特定的情况下显示隐藏的列,这时我们可以使用表格的scoped slot来实现。具体实现步骤如下: 1.在表头中定义需要隐藏的列的column,例如name列: ``` <el-table-column prop="name" label="姓名" :visible="false"></el-table-column> ``` 2.在表格组件中定义一个scoped slot,以slot-scope="{ column, $index }"来获取当前列和当前行的索引值,然后根据需要显示隐藏列 ``` <el-table :data="tableData" style="width: 100%"> <template slot-scope="{ column, $index }"> <el-table-column v-if="column.label == '姓名'" prop="name" label="姓名" :key="$index" :visible="true"> </el-table-column> <el-table-column v-else :prop="column.prop" :label="column.label" :key="$index" :visible="column.visible"> </el-table-column> </template> </el-table> ``` 这样,在页面中,我们就可以通过控制visible属性来动态显示和隐藏列了。 总的来说,element-ui表格组件非常灵活且功能强大,通过控制column的visible属性,可以轻松实现表格列的隐藏。同时,通过使用scoped slot,还可以实现动态显示和隐藏列,方便开发者按需加载表格数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值