使用组件页面
<SelectTree
:props="props"
:options="optionData"
:clearable="isClearable"
:accordion="isAccordion"
:value="valueId"
@getValue="getValue($event)"
/>
import SelectTree from "./components/treeSelect";
export default {
components: {
SelectTree
},
data() {
return {
privilegeList: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1"
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2"
}
]
}
],
isClearable: true, // 可清空(可选)
isAccordion: true, // 可收起(可选)
valueId: "",
props: {
// 配置项(必选)
value: "id",
label: "name",
children: "children"
// disabled:true
}
};
},
computed: {
/* 转树形数据 */
optionData() {
//这里如果是后台返回的树形结构可直接引用 不用转换
let cloneData = JSON.parse(JSON.stringify(this.privilegeList)); // 对源数据深度克隆
return cloneData.filter(father => {
// 循环所有项,并添加children属性
let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性,并赋值
return father.parentId == 0; //返回第一层
});
return cloneData;
}
},
methods: {
getValue(value) {
console.log(value);
}
}
};
下面是组件 可以直接用
<template>
<el-select
:value="valueTitle"
:clearable="clearable"
class="maxwidth"
@clear="clearHandle"
ref="selectblur"
>
<el-option :value="valueTitle" :label="valueTitle" class="options">
<el-tree
id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
:default-expanded-keys="defaultExpandedKey"
:expand-on-click-node="false"
@node-click="handleNodeClick"
/>
</el-option>
</el-select>
</template>
<script>
export default {
name: "ElTreeSelect",
props: {
// 配置项
props: {
type: Object,
default: () => ({
value: "id", // ID字段名
label: "title", // 显示名称
children: "children" // 子级字段名
})
},
// 选项列表数据(树形结构的对象数组)
options: { type: Array, default: () => [] },
// 初始值
value: { type: String, default: null },
// 可清空选项
clearable: { type: Boolean, default: true },
// 自动收起
accordion: { type: Boolean, default: false }
},
data() {
return {
valueId: null,
valueTitle: "",
defaultExpandedKey: []
};
},
watch: {
value() {
this.valueId = "";
this.valueTitle = "";
this.valueId = this.value;
this.initHandle();
}
},
mounted() {
this.valueId = this.value; // 初始值
this.initHandle();
},
methods: {
// 初始化值
initHandle() {
if (this.valueId) {
this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[
this.props.label
]; // 初始化显示
this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
this.defaultExpandedKey = [this.valueId]; // 设置默认展开
}
this.initScroll();
},
// 初始化滚动条
initScroll() {
this.$nextTick(() => {
const scrollWrap = document.querySelectorAll(
".el-scrollbar .el-select-dropdown__wrap"
)[0];
const scrollBar = document.querySelectorAll(
".el-scrollbar .el-scrollbar__bar"
);
scrollWrap.style.cssText =
"margin: 0px; max-height: none; overflow: hidden;";
scrollBar.forEach(ele => (ele.style.width = 0));
});
},
// 切换选项
handleNodeClick(node) {
this.$refs.selectblur.blur();//让下拉框失去焦点事件
this.valueTitle = node[this.props.label];
this.valueId = node[this.props.value];
this.$emit("getValue", this.valueId);
this.defaultExpandedKey = [];
},
// 清除选中
clearHandle() {
this.valueTitle = "";
this.valueId = null;
this.defaultExpandedKey = [];
this.clearSelected();
this.$emit("getValue", null);
},
// 清空选中样式
clearSelected() {
const 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 >>> .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
color: #409eff;
font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
color: #606266;
font-weight: normal;
}
.maxwidth {
width: 100%;
}
</style>