vue实现tree-select组件(树选择器)

组件效果

思路

主要用iview的Dropdown、Input和Tree组件实现，Dropdown作为外层组件，实现下拉收缩效果，Input实现数据回显，Tree加载数据选项。重点是Tree作为Dropdown的list插槽实现下拉选项的效果

实现

1. 模板部分
   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>

2. 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;
  },
},

3. 加些样式

<style scoped>
.i-tree {
  max-height: 300px;
  overflow: auto;
  width: 100%;
}
.i-tree /deep/ .ivu-tree-title {
  width: 100%;
}
</style>

4. 加个鼠标监听器

 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;
        }
      }
    },
 },

这样点击其他区域下拉框就会自动收缩了