修改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;
    }
  }
}

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

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值