原创

修改elementUI中el-table树形结构图标

温馨提示:
本文最后更新于 2024年02月07日,已超过 18 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我


elementUI中的表格,可以显示成树形的结构,默认的样式,跟el-tree的样式一样,el-table如果是树形结构的话,如果树形有下级的话,显示的是一个小三角号,如果没有下级的话,是没有图标的。

感觉这种图标不是特别好看,为了美化,我们可以替换成自己的图标。

如果我们想改变树形的图标,可以在vuestyle中加入以下样式

<style scoped>
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

/*有子节点 且未展开*/
.el-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before {
  background: url('../../../../assets/images/文件夹未展开.png') no-repeat;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

/*有子节点 且已展开*/
.el-table /deep/ .el-table__expand-icon--expanded{
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.el-table /deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before {
  background: url('../../../../assets/images/文件夹展开.png') no-repeat;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;

}

/*没有子节点*/
.el-table /deep/ .el-table__placeholder::before {
  background: url('../../../../assets/images/文件.png') no-repeat;
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

</style>
正文到此结束
本文目录