修改elementui表格的下拉箭头

使用elementui自带的图标,原先表格的下拉箭头是这样的
展开行
如果想按照elementui自带的图标进行修改,右边tab选择到图标对应处,F12打开开发者工具选择想要使用的图标,在开发工具中打开自定义图标会发现图表可以结合伪元素:after进行content输入选择对应的图标。
在这里插入图片描述
针对表格的展开行图标自定义,也可以按照:before设置content进行图标选择,下面提供一种方式:

/deep/.el-table__expand-column .cell {
  .el-table__expand-icon--expanded {
    // 这是点击后的旋转角度
    transform: rotate(0deg);
  }
  /deep/.el-table__expand-icon {
    .el-icon-arrow-right:before {
      //这是收起图标
      content: "\e723";
      font-size: 14px;
    }
  }

  /deep/ .el-table__expand-icon--expanded {
    .el-icon-arrow-right:before {
      // 这是展开图标
      content: "\e722";
      font-size: 14px;
    }
  }
}

得到的结果图,更换了原始的箭头样式
在这里插入图片描述


版权声明:本文为qq_35142645原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。