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;
}
}
}