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

香草物语博客 2021-05-19

4855

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

感觉这种图标不是特别好看，为了美化，我们可以替换成自己的图标。如果我们想改变树形的图标，可以在vue
的style
中加入以下样式

<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>

修改后如下所示

数据库

文章转载自香草物语博客，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

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

评论