自定义el |
您所在的位置：网站首页 › 小米图标怎么改自定义颜色 › 自定义el |
自定义el
|
1.项目中有一份数据是文件夹里面包含文件夹再包含问件的格式,有个需求是需要将文件夹和文件的图标区别处理.
{{ data.aliaName }}
export default{
data(){
resourceData: [],
defaultProps: {
value: 'id', // ID字段名
label: 'aliaName', // 显示名称
children: 'children' // 子级字段名
},
},
methods:{
// 数据添加图标
addIcon(data) {
data.map((item) => {
item.icon = require('../../../assets/pack.png');
if (item.children && item.children.length > 0) {
this.addIcon(item.children);
} else {
item.icon = require('../../../assets/layer.png');
}
});
}
},
created(){
this.addIcon(this.resourceData)
}
}
最后的效果如下: 修改三角图标的颜色比较简单,加上下面的代码即可 .el-tree .el-tree-node__expand-icon { color: #ccc; }但是加上了之后会出现一个问题,会将叶子节点(没有子节点的)也给添加了三角图标,审查元素发现所有节点的图标都带有一样的类名,只要修改样式就会更改所有图标,不管是否是叶子节点.所以还要加上下面的代码,隐藏叶子节点的三角图标才能行. .el-tree-node__expand-icon.is-leaf::before { display: none; } |
【本文地址】
今日新闻 |
推荐新闻 |