- el-tree 每个节点左右布局
- 鼠标经过接电视，左边文字变色，右边不变
<el-tree
:data="list"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
>
<template #default="{ data }">
<el-row
style="width: 100%; height: 40px"
type="flex"
align="middle"
justify="space-between"
>
<el-col :span="16">{{ data.name }}</el-col>
<el-col :span="6" class="right">
<span>{{ data.managerName }}</span>
<el-dropdown @command="operateDept($event,data.id)">
<span class="el-dropdown-link">
操作
<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="add">添加子部门</el-dropdown-item>
<el-dropdown-item command="edit">编辑部门</el-dropdown-item>
<el-dropdown-item command="del">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</template>
</el-tree>
.el-tree {
::v-deep .el-tree-node__content {
width: 100%;
height: 40px;
&:hover {
color: blue;
}
}
.el-row {
.right {
width: 200px;
display: flex;
justify-content: space-between;
}
}
}
文章来源地址https://www.toymoban.com/news/detail-854522.html
文章来源：https://www.toymoban.com/news/detail-854522.html
到了这里，关于el-tree基础渲染的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
