element-UI el-table树形数据 修改小三角图标
2020-07-14 04:40
3275 查看
el-table树形数据 默认样式
有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有。
更改成自定义样式
因为是vue的 <style scoped>内写CSS 样式,所以需要添加 /deep/ 进行穿透
.el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子节点 且未展开 .el-table/deep/ .el-icon-arrow-right:before { background: url('./images/folder.png') no-repeat 0 3px; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } //有子节点 且已展开 .el-table/deep/ .el-table__expand-icon--expanded { .el-icon-arrow-right:before { background: url('./images/folderOpen2.png') no-repeat 0 3px; content: ''; display: block; width: 15px; height: 20px; font-size: 18px; background-size: 21px; } } //没有子节点 .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before .el-table/deep/.el-table__placeholder::before { background: url('./images/file.png') no-repeat 0 3px; content: ''; display: block; width: 16px; height: 18px; font-size: 16px; background-size: 16px; }
点击打开子节点时小图标会旋转,没找到怎么解决,使用了一张左旋90°的图片
图片来自 Iconfont-阿里巴巴矢量图标库
相关文章推荐
- Element-ui el-table 树形表格多选
- Table动态增加,删除,修改行,保存数据
- element-ui中table表头添加元素(或者图标)
- elementUI vue 在table中根据不同数据实现不同的tag
- 算法:将table标识的树形结构文本数据快速导入Mysql邻接表
- 使用递归算法结合数据库解析成java树形结构 1、准备表结构及对应的表数据 a、表结构: create table TB_TREE ( CID NUMBER not null, CNAME VAR
- element-ui 中 table表格中无法修改表头宽度(二)
- 修改 element ui table hover时的背景色
- .NET中,修改DateSet.xsd数据集中TableAdapter的超时设置的方法(转自:股海无涯)
- #关于Vue+Element中Table懒加载删除后数据动态更新问题的解决
- element-ui中的表格el-table滚动条样式修改
- elementui el-table 单元格是图标,鼠标划入显示文字
- vue之table初始化后修改单条数据视图不更新的问题总结
- 修改Flex请求数据时等待鼠标的图标
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- vue elementUI table表格数据 滚动懒加载的实现方法
- 算法:将table标识的树形结构文本数据快速导入Mysql邻接表
- element中table实现数据回显功能
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- 修改elementUI table tr th 的高度、背景颜色