el-table中展示树形数据（需要加图标样式）

效果图：

 

1.el-table属性，row-key，tree-props是树形必填属性

2.写增加特殊样式的方法

3.使其特殊样式生效的样式写法

.el-table ::v-deep .deffCell>.el-tooltip{
  justify-content: flex-start !important;
}

4.在el-table组件的样式上加图标（三种状态：有子级的选中状态黑色倾斜三角图标，有子级的未选中状态是灰白色三角图标，没孩子的是文件图标）

// table加上图标
::v-deep .el-tooltip {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 原本样式的图标点击后会有90°的旋转，此样式把旋转取消。 */
::v-deep .el-table__expand-icon--expanded {
  transform: rotate(0deg);
}

/* 因为我放的是两张图片比较大，修改放图标元素的宽度才能放得下图标 */
::v-deep .el-table [class*="el-table__row--level"] .el-table__expand-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  .el-icon-arrow-right {
    margin-top: 5px;
  }
}

/* 有子节点 且未展开 */
.el-table ::v-deep .el-icon-arrow-right::before {
  background-image: url("../../../../assets/knowAll/i_jt2.png"),
    url("../../../../assets/knowAll/i_wjj1.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right bottom;
  /* 原本content是一个图标，置为空 */
  content: "";
  display: block;
  width: 32px;
  height: 19px;
  background-size: 15px, 18px;
}

/* 有子节点 且已展开 */
::v-deep .el-table__expand-icon--expanded {
  .el-icon-arrow-right::before {
    background: url("../../../../assets/knowAll/i_jt1.png"),
      url("../../../../assets/knowAll/i_wjj2.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;
    content: "";
    display: block;
    width: 36px;
    height: 19px;
    background-size: 15px 18px;
  }
}

::v-deep .el-table__placeholder {
  width: 24px !important;
}
::v-deep .el-table__placeholder::before {
  background: url("../../../../assets/knowAll/i_wjj3.png") no-repeat;
  content: "";
  display: block;
  width: 30px;
  height: 25px;
  font-size: 15px;
  background-size: 22px;
  margin-right: 10px;
}

5.table中图标样式的调整比较繁琐，需要根据具体图片的大小比例等进行调整