.el-tree-node:not(.level-1) .el-tree-node__expand-icon::before { content: ""; background-image: url("../../../icons/png/tree-open1.png"); /* 第三套自定义图片的路径 */ background-size: contain; display: inline-block; width: 16px; height: 16px; margin-right: 8px; }未生效
时间: 2024-04-01 16:35:40 浏览: 23
如果你的样式未生效,可能是因为你的样式被其他更具体的样式覆盖了。你可以尝试增加样式的权重来解决这个问题。例如,你可以在选择器前面加上 `body` 或者其他更具体的选择器,或者在样式后面加上 `!important` 来提高样式的优先级。同时,你也可以使用浏览器的开发者工具查看样式是否被应用,以及样式的优先级是否正确。
相关问题
element-plus中el-icon el-tree-node__expand-icon expanded 图标没有跟着变
这可能是因为你使用了自定义的图标,而没有更新自定义图标的样式。
你可以尝试在展开和折叠节点时,手动切换图标的样式。例如:
```vue
<template>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
<template #default="{ node, data }">
<span class="custom-icon" :class="{'el-icon-arrow-right': !node.expanded, 'el-icon-arrow-down': node.expanded}" v-if="!data.loading"></span>
</template>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{ label: '三级 1-1-1' },
{ label: '三级 1-1-2' }
]
},
{
label: '二级 1-2',
children: [
{ label: '三级 1-2-1' },
{ label: '三级 1-2-2' }
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data, node) {
node.expanded = !node.expanded
node.iconClass = node.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
}
}
}
</script>
<style scoped>
.custom-icon {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 4px;
background-repeat: no-repeat;
background-position: center;
}
.el-icon-arrow-right:before {
content: '\e61b';
}
.el-icon-arrow-down:before {
content: '\e61a';
}
</style>
```
在这个例子中,我们使用了一个自定义的图标,并在展开和折叠节点时,手动切换图标的样式。这样可以确保图标随着节点的展开和折叠而正确地变化。
el-tree-v2的:default-expand-all不生效
可能是因为你没有正确设置 `:default-expand-all` 的值。请确保你已经将其设置为布尔值 `true`,并且将其放在 `el-tree-v2` 组件的属性中。如果你已经正确设置了该属性,但是它仍未生效,那么可能是因为你的数据源中没有包含 `expanded` 属性。在这种情况下,你需要手动将每个节点的 `expanded` 属性设置为 `true`,以便默认展开所有节点。