vue element 修改table expand展开行的图标以及动效
原本的展开行效果:来源于element官网 组件目标的展开行效果:未展开时候为加号+边框,展开过程无动效,展开后是减号+边框实现效果代码:/*修改展开按钮的样式 start*//*1.取消原本展开的旋转动效*/el-table__expand-icon{-webkit-transform: rotate(0deg);transform: rotate(0deg);}/*2.展开按钮未点击的...
·
原本的展开行效果:
来源于element官网 组件
目标的展开行效果:
未展开时候为加号+边框,展开过程无动效,展开后是减号+边框
实现效果代码:
/*修改展开按钮的样式 start*/
/*1.取消原本展开的旋转动效*/
el-table__expand-icon{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*2.展开按钮未点击的样式是加号带边框*/
el-table__expand-icon .el-icon-arrow-right:before{
content: "\e6d9";
border: 1px solid #ccc;
padding: 2px;
}
/*3.展开按钮点击后的样式是减号带边框*/
.el-table__expand-icon--expanded .el-icon-arrow-right:before{
content: "\e6d8";
}
/*修改展开按钮的样式 end*/
content内的\e6d9等图标代号,可以通过在https://element.eleme.cn/#/zh-CN/component/icon,右键审查元素,鼠标移到对应图标上面,查看styles中的content获取(如下图):
更多推荐
已为社区贡献5条内容
所有评论(0)