vue实现tree-select组件(树选择器)
组件效果
思路
主要用iview的Dropdown、Input和Tree组件实现，Dropdown作为外层组件，实现下拉收缩效果，Input实现数据回显，Tree加载数据选项。重点是Tree作为Dropdown的list插槽实现下拉选项的效果
实现
- 模板部分 trigger为custom，手动控制下拉框的显示，Input设为只读
<Dropdown
ref="dropdownRef"
style="width:100%"
trigger="custom"
:visible="showDrop"
:disabled="disabled"
>
<Input
v-model="showVal"
style="width: 100%;"
readonlys
icon="ios-arrow-down"
placeholder="请选择"
@click.native="showDropItem"
/>
<Tree
class="i-tree"
slot="list"
style="width: 100%;"
:data="treeData"
@on-select-change="handleChange"
></Tree>
</Dropdown>
- js逻辑 组件加载时初始化TreeData，handleChange事件处理树的点击逻辑，点击Input控制下拉框展示和关闭
mounted() {
let list = [];
this.$post(this.url)
.then((res) => {
res.goodsTypes.forEach((item) => {
list.push({
title: item.title,
value: item.value,
expand: false,
selected: false,
children: item.children || [],
});
});
this.treeData = list;
})
.catch((err) => {
console.log(err);
});
},
methods: {
// 选择事件
handleChange(e, node) {
this.val = node.value;
this.showVal = node.title;
this.showDrop = false;
this.$emit("on-change", this.val, this.formKey, this.itemKey);
},
// 控制下拉框展示和关闭
showDropItem() {
this.showDrop = !this.showDrop;
},
},
- 加些样式
<style scoped>
.i-tree {
max-height: 300px;
overflow: auto;
width: 100%;
}
.i-tree /deep/ .ivu-tree-title {
width: 100%;
}
</style>
- 加个鼠标监听器
mounted() {
// 加入全局监听
document.addEventListener("click", this.autoHidden);
},
destroyed() {
// 移除全局监听
document.removeEventListener("click", this.autoHidden);
},
methods: {
// 点击其他地方控制下拉框收起
autoHidden(e) {
if (this.$refs.dropdownRef) {
// 判断鼠标点击的dom不在dropdownRef中，且下拉框为显示状态
if (!this.$refs.dropdownRef.$el.contains(e.target) && this.showDrop) {
this.showDrop = false;
}
}
},
},
这样点击其他区域下拉框就会自动收缩了
