生成 element ui tree组件 美化的代码
时间: 2023-10-14 12:18:47 浏览: 60
以下是生成 Element UI Tree 组件美化的代码,你可以根据需要自行调整样式:
```html
<template>
<el-tree
:data="data"
:props="defaultProps"
node-key="id"
show-checkbox
default-expand-all
:indent="20"
highlight-current
class="custom-tree"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<span class="custom-tree-node-label">{{ node.label }}</span>
<span class="custom-tree-node-actions">
<el-button type="text" icon="el-icon-plus" size="mini"></el-button>
<el-button type="text" icon="el-icon-edit" size="mini"></el-button>
<el-button type="text" icon="el-icon-delete" size="mini"></el-button>
</span>
</span>
</template>
</el-tree>
</template>
<style scoped>
.custom-tree {
border: 1px solid #ebeef5;
border-radius: 4px;
background-color: #f2f6fc;
padding: 10px;
}
.custom-tree-node {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
margin: 5px 0;
border-radius: 4px;
background-color: #fff;
}
.custom-tree-node-label {
font-weight: bold;
}
.custom-tree-node-actions {
display: flex;
align-items: center;
}
.custom-tree-node-actions button {
margin-left: 5px;
padding: 0;
}
.custom-tree-node-actions button:hover {
color: #409eff;
}
</style>
```
解释:
- `class="custom-tree"`:给树组件添加一个自定义的类名,方便样式定制。
- `template #default`:自定义节点的显示方式,包括节点的文本和操作按钮。
- `.custom-tree`:设置树组件的样式,包括边框、背景色和内边距等。
- `.custom-tree-node`:设置节点的样式,包括背景色、边距和圆角等。
- `.custom-tree-node-label`:设置节点文本的样式,包括加粗。
- `.custom-tree-node-actions`:设置操作按钮的样式,包括显示方式和对齐方式。
- `.custom-tree-node-actions button`:设置操作按钮的样式,包括间距和内边距。
- `.custom-tree-node-actions button:hover`:设置按钮的鼠标悬停样式,包括颜色。