el-table的展开图标替换为其他图标

车银优

已于 2022-11-30 14:57:44 修改

阅读量1.2k

点赞数

文章标签： vue.js css javascript

于 2022-11-30 13:53:12 首次发布

本文链接：https://blog.csdn.net/qq_43557395/article/details/128113802

版权

在这里插入图片描述

// 将el-table的展开图标替换为其他图标
/deep/.el-table__expand-icon {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
// 换图片
/deep/.el-table__expand-icon .el-icon-arrow-right:before {
  background: url("../../assets/image/dialog/qz.png") no-repeat 0 1px;
  content: "";
  display: block;
  width: 15px;
  height: 20px;
  font-size: 18px;
  background-size: 14px;
}

/deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before {
  background: url("../../assets/image/dialog/qz.png") no-repeat 0 1px;
  content: "";
  display: block;
  width: 15px;
  height: 20px;
  font-size: 18px;
  background-size: 14px;
}

// 换icon
/deep/.el-table__expand-icon .el-icon-arrow-right:before {
   content: "\e791"; // 右键点击elementui 找到当前想要的icon  如下图所示
   font-size: 16px;
   line-height: 10px;
   color: #919CAF;
 }

 /deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before {
   content:"\e790";
   font-size: 16px;
   line-height: 10px;
   color: #919CAF;
 }