vue使用element开发-Table表格多选表头添加文字


效果图:

 

 

 在不影响组件功能的基础上改变样式:

在表格组件的el-table-column标签上添加label-class-name属性来自定义列标题

<el-table-column
  label-class-name="DisabledSelection"
  width="70px"
  type="selection"
  header-align="center"
  align="center">
</el-table-column>

然后是css样式,调整复选框的位置,插入文字即可,/deep/是为了防止跟样式影响其他地方组件的样式,

  .el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
    margin-left: -30px;
    position:relative;
  }
  .el-table /deep/.DisabledSelection .cell:before{
    content:"全选";
    position:absolute;
    right:11px;
  }

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM