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