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