ElementUI表格中树节点图标替换

关于ElementUI表格中树节点图标替换,以下方式在html+css+js下亲测无误,对于vue脚手架需要样式穿透,使用深度作用选择器进行适当修改即可。

// 有子节点 且未展开
.el-table .el-icon-arrow-right:before {
  background: url("../images/folder.png") no-repeat;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
// 有子节点 且已展开
.el-table .el-table__expand-icon--expanded {
  .el-icon-arrow-right:before {
    background: url("../images/folderOpen.png") no-repeat;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
}
// 没有子节点
.el-table .el-table__placeholder::before {
  background: url("../images/file.png") no-repeat;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
// 展开折叠时不进行动画,否则图标会旋转
.el-table .el-table__expand-icon--expanded {
  transform: none;
}

图标来源于iconfont
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

你可能感兴趣的:(开发百宝箱系列,elementui,javascript,css3,前端)