el-select组件与el-tree组件结合实现下拉选择树型结构框
<template>
<div class="tree-con">
<el-select
v-model="value"
placeholder="请选择"
class="bs-select"
ref="select"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
<div slot="empty">
<el-tree
:data="treeOptions"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
</div>
</el-select>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
props: {
treeData: {
type: Array,
default: () => [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1",
},
],
},
],
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1",
},
],
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1",
},
],
},
],
},
{
label: "一级 3",
children: [
{
label: "二级 3-1",
children: [
{
label: "三级 3-1-1",
},
],
},
{
label: "二级 3-2",
children: [
{
label: "三级 3-2-1",
},
],
},
],
},
],
},
},
computed: {
...mapState({
bsParams: (state) => state.Layout.bsParams,
}),
},
data() {
return {
options: [],
value: "",
treeOptions: [],
defaultProps: {
children: "children",
label: "label",
},
};
},
watch: {
treeData: {
handler(newVal) {
this.treeOptions = newVal || [];
// 赋值默认选择项
this.value =
this.findLabel(this.treeOptions, this.bsParams.countyCode) || "";
},
immediate: true,
deep: true,
},
},
methods: {
...mapActions(["updateBsParams"]),
findLabel(tree, targetId) {
for (const node of tree) {
if (node.id == targetId) return node.label;
if (node.children) {
const result = this.findLabel(node.children, targetId);
if (result) return result;
}
}
return null;
},
handleNodeClick(data) {
this.value = data.label;
this.updateBsParams({
countyCode: data.id,
});
this.$refs.select.blur(); // `选择项后，关闭el-select下拉框`
},
},
};
</script>
<style lang="scss" scoped>
.bs-select {
width: 100%;
.el-input__inner {
background-color: #266ddc;
border-radius: 20px;
border: 1px solid #2d83e4;
color: #6dfeff;
height: 31px;
line-height: 31px;
}
:hover {
.el-input__inner {
border: 1px solid #6dfeff;
}
}
.el-input__suffix {
top: -0.125rem;
}
.el-select__caret {
color: #6dfeff !important;
}
}
</style>