element table 全选按钮不显示,并显示文字描述(操

2020-12-05  本文已影响0人  bypwan

效果图

组件复选效果:


table-checkbox.png

修改后的效果图:


table-checkbox-detal.png

需求:

el-table的多选功能,但是不期望表头显示全选按钮及全选功能

实现:

仅需要更改css样式,通过伪元素实现将表头的全选框变成操作文字

<style lang="less">
  .merge-table-warehouse .el-table__header-wrapper {
     th:first-child{
       .cell{
         width: 60px;
         .el-checkbox{
           display:none
         }
         &:after{
           content:'操作'
         }
       }
     }
  }
</style>

总结:

是不是很简单,不需要修改逻辑,直接修改样式,直接拿去就可使用哟

上一篇 下一篇

猜你喜欢

热点阅读