下拉多选
<template>
<el-form>
<el-form-item label="上级组织：" label-width="100px" prop="parent_id">
<el-select
ref="treeSelect"
v-model="form.parent_id"
placeholder="请选择上级组织"
multiple
clearable
@clear="handleClear"
>
<el-option :value="form.parent_id">
<el-tree
ref="selectTree"
node-key="id"
show-checkbox
:data="treeData"
:props="defaultProps"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
:highlight-current="true"
:default-expand-all="true"
@check-change="handleCheckChange"
></el-tree>
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
// data() 定义的数据
data() {
return {
form: {
parent_id: [],
},
// 组织下拉
treeData: [
{
id: 1,
name: "系统管理",
children: [
{
id: 100,
name: "用户管理",
children: [
{
id: 1000,
name: "用户查询",
},
{
id: 1001,
name: "用户新增",
},
{
id: 1002,
name: "用户修改",
},
{
id: 1003,
name: "用户删除",
},
],
},
{
id: 101,
name: "角色管理",
children: [
{
id: 1006,
name: "角色查询",
},
{
id: 1007,
name: "角色新增",
},
{
id: 1008,
name: "角色修改",
},
{
id: 1011,
name: "删除角色",
},
],
},
],
},
],
// 组织树默认
defaultProps: {
value: "id",
label: "name",
children: "children",
},
// 默认展开
defaultExpandedKeys: [],
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
const dataJson = this.$refs.selectTree.getCheckedNodes();
if (dataJson && dataJson.length) {
this.form.parent_id = [];
dataJson.forEach((res) => {
this.form.parent_id.push(res.name);
});
}
this.form.parent_id = [...new Set(this.form.parent_id)];
},
// 树清空
handleClear() {
this.treeLabel = "";
this.clearSelected();
},
/* 清空选中样式 */
clearSelected() {
let allNode = document.querySelectorAll("#tree-option .el-tree-node");
allNode.forEach((element) => element.classList.remove("is-current"));
},
},
};
</script>
<style scoped>
/* 下拉高度 */
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li :deep(.el-tree .el-tree-node__content) {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree :deep(.is-current .el-tree-node__label) {
color: #409eff;
font-weight: 700;
}
.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
color: #606266;
font-weight: normal;
}
</style>
下拉单选
<template>
<div class="app-container">
<el-select
class="main-select-tree"
ref="selectTree"
v-model="value"
style="width: 560px"
>
<el-option
v-for="item in formatData(datas)"
:key="item.value"
:label="item.label"
:value="item.value"
style="display: none"
/>
<el-tree
class="main-select-el-tree"
ref="selecteltree"
:data="datas"
node-key="id"
highlight-current
:props="defaultProps"
@node-click="handleNodeClick"
:current-node-key="value"
:expand-on-click-node="expandOnClickNode"
default-expand-all
/>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
value: 6,
expandOnClickNode: true,
options: [],
datas: [
{
id: 1,
label: "云南",
children: [
{
id: 2,
label: "昆明",
children: [
{
id: 3,
label: "五华区",
children: [{ id: 8, label: "北辰小区" }],
},
{ id: 4, label: "盘龙区" },
],
},
],
},
{
id: 5,
label: "湖南",
children: [
{ id: 6, label: "长沙" },
{ id: 7, label: "永州" },
],
},
],
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
// 四级菜单
formatData(data) {
let options = [];
data.forEach((item, key) => {
options.push({ label: item.label, value: item.id });
if (item.children) {
item.children.forEach((items, keys) => {
options.push({ label: items.label, value: items.id });
if (items.children) {
items.children.forEach((itemss, keyss) => {
options.push({ label: itemss.label, value: itemss.id });
if (itemss.children) {
itemss.children.forEach((itemsss, keysss) => {
options.push({ label: itemsss.label, value: itemsss.id });
});
}
});
}
});
}
});
return options;
},
handleNodeClick(node) {
this.value = node.id;
this.$refs.selectTree.blur();
},
},
};
</script>
<style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
font-weight: bold;
color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
font-weight: bold;
color: #409eff;
}
</style>
