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

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

作者: bypwan | 来源:发表于2020-12-05 16:33 被阅读0次

效果图

组件复选效果:


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>

总结:

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

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/kfpgwktx.html