vue树形单选表单

image.png

<template>
  <div>
    <tree-lazy
      v-model="ipgroup_id"
      :treeInput="treeInput"
      @loadNode="loadNode"
      @loadSelect="loadSelect"
    />
   <p>ipgroup_id: {{ipgroup_id}}</p> 
   <p>treeInput: {{treeInput}}</p> 
  </div>
</template>

<script>
import treeLazy from "@/components/init/tree-lazy";
export default {
  components: {
    treeLazy
  },
  data() {
    return {
      ipgroup_id: "",
      treeInput: ""
    };
  },
  methods: {
    loadSelect(data) {
      this.treeInput = data.name;
      this.ipgroup_id = data.id;
    },
    //树形加载
    async loadNode(node, resolve) {
      let data = await this.loadGetData(node);
      resolve(data);
    },
    //动态加载数据
    loadGetData(node) {
      return new Promise((resolve, reject) => {
        this.$HTTP.api({
          url:
            APP_ROOT +
            "/DRS/query/keyDomain/ipGroupList?groupTypeId=10000;10002;20001&startDate=undefined&endDate=undefined&id=" +
            (node.data ? node.data.id : ""),
          emulateJSON: true,
          showLoading: false,
          successCallback: function(res) {
            let d = [];
            for (let i of res) {
              d.push({ id: i.id, name: i.name });
            }
            resolve(d);
          }.bind(this)
        });
      });
    }
  }
};
</script>

组件 tree-lazy.vue

<!--tree-lazy树表单-->
<template>
  <div>
    <el-input
      :placeholder="placeholder"
      id="Treeicp"
      class="width-220 selectTree-input"
      auto-complete="off"
      v-model="treeInput"
      @click.native="changeSelectTree"
      disabled
      clearable
    ></el-input>
    <el-tree
      id="floatTree"
      v-show="isShowSelect"
      empty-text="暂无数据"
      :highlight-current="true"
      :default-expand-all="false"
      :expand-on-click-node="true"
      :props="props"
      :load="loadNode"
      lazy
      @node-click="loadSelect"
      class="objectTree selectTree"
      ref="selectTree"
    ></el-tree>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ""
    },
    treeInput: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      props: {
        label: "name",
        children: "children",
        isLeaf: "leaf"
      },
      isShowSelect: false
    };
  },
  methods: {
    loadSelect(data) {
      this.$emit("loadSelect", data);
    },
    changeSelectTree() {
      this.isShowSelect = !this.isShowSelect;
    },
    /* 加载方法*/
    loadNode(node, resolve) {
      // this.$emit("loadNode", node, resolve);
        if (node.level < 5) { resolve([{ name: "姓名"+node.level, id: 555 }]);}else{resolve([])}
    }
  },
  mounted() {
    let that = this;
    document.addEventListener("click", function(e) {
      if (e.target.className != "selectTree" && e.srcElement.id != "Treeicp") {
        that.isShowSelect = false;
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.objectTree {
  position: absolute;
  overflow: auto;
  z-index: 100;
  min-height: 150px;
  max-height: 260px;
  min-width: 220px;
  max-width: 420px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  line-height: normal;
  z-index: 204;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.width-220 {
  width: 220px;
}
</style>

包括懒加载