el-select+el-tree实现树形选择器
看别人写的select+tree实现树形选择器比较奇葩,具体实现是将整个tree放入一个select-item,需要自己写交互逻辑,很麻烦,所以自己使用tree的slot写入item
<el-select
v-model="tempPermission.parentId"
:placeholder="showInput === 2 ? '请选择上级菜单' : '请选择所属菜单'"
style="width: 100%"
popper-class="tree-select"
>
<el-tree
:data="allPermission"
node-key="id"
auto-expand-parent
:default-checked-keys="[tempPermission.parentId]"
:expand-on-click-node="false"
>
<template slot-scope="{ data }">
<el-option
:key="data.id"
style="width: 100%"
:value="data.id"
:label="data.name"
/>
</template>
</el-tree>
</el-select>
.tree-select {
padding: 5px 2px;
}
.tree-select .el-tree {
max-height: 200px;
}
.tree-select .el-select-dropdown__item {
padding: 0 5px;
height: 30px;
line-height: 30px;
border-radius: 5px;
}
.tree-select .el-select-dropdown__item.hover {
background-color: #E6F7FF;
}
.tree-select .el-tree .el-tree-node__content:hover {
background: #ffffff;
}
.tree-select .el-tree .el-tree-node:focus > .el-tree-node__content {
background-color: #ffffff;
}