61inputTree

Posted 2020-12-20 gfbzs

<template>
  <div>
    <el-input :size="size" ref="selectInput" v-model="treeName" placeholder="请选择" readonly @click.native="projectOrgFun($event)" />
    <div>
        <el-tree
          v-show="ishowTree"
          ref="selectTree"
          v-model="treeId"
          node-key="id"
          :data="treeData"
          highlight-current
          :props="defaultProps"
          size="mini"
          @node-click="handleNodeClick"
        />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //树形数据
    treeData: {
      type: Array,
      default: undefined
    },
    //树形选择框大小
   size: {
      type: String,
      default: "mini"
    }
  },
  data() {
    return {
      treeId: ‘‘,
      treeName: ‘‘, // 选中的节点名称
      ishowTree: false,
      defaultProps: {
        children: ‘children‘,
        label: ‘label‘
      },
      projectOrg: ‘‘
    }
  },
  created(){

  },
  methods: {
    // 点击输入框，展开树结构，绑定鼠标移出事件
    projectOrgFun(e) {
      var that = this
      if (that.ishowTree) {
        that.ishowTree = false
      } else {
        that.ishowTree = true
      }
      // 第一种方式:点击其他区域, 消失树
      this.$refs.selectInput.onclick = function() {
        that.projectOrgFalse()
      }
      e.stopPropagation()// 阻止冒泡
      // 离开区域的时候树消失
      that.$refs.selectTree.$el.onmouseleave = function() {
        that.projectOrgFalse()
      }
    },
    // 收起树并隐藏
    projectOrgFalse() {
      for (var i = 0; i < this.$refs.selectTree.store._getAllNodes().length; i++) {
        this.$refs.selectTree.store._getAllNodes()[i].expanded = false
      }
      this.ishowTree = false
    },
    // 点击树节点
    handleNodeClick(data) {
      this.treeId = data.id
      this.treeName = data.label
      this.ishowTree = false
      for (var i = 0; i < this.$refs.selectTree.store._getAllNodes().length; i++) {
        this.$refs.selectTree.store._getAllNodes()[i].expanded = false
      }
      this.$emit(‘nodeSelect‘, data)
    },
    // 监听树节点变化执行方法
    nodeChanged(data) {
      this.treeId = data.id
      this.treeName = data.name
      this.ishowTree = true
    }
  }
}
</script>
<style scoped>

</style>