Element-ui封装树形下拉框

树形下拉框子组件

<template>
<div class="box">
<el-select ref="selectAppType" size="small" placeholder="请选择" v-model="selectValue">
<el-option class="option-style" :label="selectLabel" :value="selectValue">
<el-tree :data="treeData" :props="treeProps" @node-click="nodeClick"></el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "test",
components: {},
props: {
treeData: Array,
treeProps:Object,
selectLabel:String,
selectValue:Number
},
data() {
return {};
},
mounted() {},
methods: {
nodeClick(obj, node) {
this.$refs.selectAppType.blur();
this.$emit("handleClick",obj.value,obj.key)
}
}
};
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
margin: 1rem;
}
.search {
width: calc(100% - 8px - 0.5rem);
margin: 0 0.5rem;
}
.option-style {
padding: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
}
</style>

调用组件

<template>
<div>
<TreeSelect
:treeData="treeData"
:treeProps="treeProps"
:selectLabel="selectLabel"
:selectValue="selectValue"
@handleClick="handleClick"
/>
</div>
</template>
<script>
import TreeSelect from "../components/treeSelect/index.vue";
export default {
name: "treeSelect",
components: {
TreeSelect,
},
data() {
return {
treeData: [
{
key: 10,
value: "物流板块0",
parentId: 0,
children: [
{
key: 3,
value: "中通",
parentId: 10,
children: [
{
key: 5,
value: "测试类型-01",
parentId: 3,
children: [
{
key: 9,
value: "物流板块",
parentId: 5,
children: null,
},
],
},
{
key: 8,
value: "测试类型-02",
parentId: 3,
children: null,
},
],
},
{
key: 7,
value: "圆通",
parentId: 10,
children: null,
},
],
},
{
key: 11,
value: "FBA操作",
parentId: 0,
children: null,
},
],
treeProps: {
children: "children",
label: "value",
},
selectLabel: "", //下拉框显示名称
selectValue: 0, //下拉框显示ID
};
},
methods: {
handleClick(label, value) {
this.selectLabel = label;
this.selectValue = value;
},
},
};
</script>
<style></style>

最后

以上就是烂漫蜜蜂为你收集整理的Element-ui封装树形下拉框的全部内容，希望文章能够帮你解决Element-ui封装树形下拉框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。