el-table樹形改變展開箭頭


// .el-tree /deep/ .el-tree-node__expand-icon.expanded
// {
//     -webkit-transform: rotate(0deg);
//     transform: rotate(0deg);
// }
//有子節點 且未展開
.el-table/deep/ .el-icon-arrow-right:before {
  background: url('../../../assets/img/自定義.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
//有子節點 且已展開
.el-table/deep/ .el-table__expand-icon--expanded {
  .el-icon-arrow-right:before {
    // background: url('./images/folderOpen2.png') no-repeat 0 3px;
    content: '';
    display: block;
    width: 15px;
    height: 20px;
    font-size: 18px;
    background-size: 21px;
  }
}
//沒有子節點
.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before
.el-table/deep/.el-table__placeholder::before {
  // background: url('./images/file.png') no-repeat 0 3px;
  content: '';
  display: block;
  width: 16px;
  height: 18px;
  font-size: 16px;
  background-size: 16px;
}

1.替換自己想要的圖片












2.替換自己的圖標,但是插入iconfont里面的圖標有點問題

/deep/.el-icon-arrow-right:before {

content: "\e6d9";

}

/deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before{

content: "\e6d8"!important;

}

/deep/.el-table__expand-icon--expanded {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

/deep/.el-table__expand-icon {

border: 1px solid #e7e7e7;

padding:1px;

}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM