element-el-tree封装

<template>
  <div>
    <!-- 部门下拉选择 -->
    <div>
      <!-- <el-select v-model="value" placeholder="全部部门">
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
      <el-popover v-model="visible" placement="bottom" width="160">
        <el-input slot="reference" v-model="department" @click="inputFocus()" />
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :default-expand-all="true"
          @node-click="handleNodeClick"
        >
          <span slot-scope="{ node }">
            <span class="el-icon-s-cooperation c-blue margin-right-5" />
            <span>
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </el-popover>
    </div>
  </div>
</template>
<script>
import { getDepartment } from '@/api/qv-enterpriseInfo'
export default {
  data() {
    return {
      visible: false,
      treeData: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      params: {
        page: 1,
        size: 100,
        departmentID: ''
      },
      department: ''
    }
  },
  watch: {
    visible() {
      console.log(this.visible)
    }
  },
  created() {},
  mounted() {
    this.getDepartmentHandle()
  },
  methods: {
    getDepartmentHandle() {
      let outer = []
      const _this = this
      getDepartment({ departmentID: 0 }).then((res) => {
        outer = res.data.data
        outer.map((item) => {
          if (item.childrenTotal > 0) {
            recursionFuc(outer)
          }
        })
        // 递归
        function recursionFuc(arr) {
          let inner = []
          arr.map((i) => {
            i.label = i.title
            i.children = []
            if (i.childrenTotal > 0) {
              // 有下级
              _this.params.departmentID = i.ID
              getDepartment(_this.params).then((data) => {
                inner = data.data.data
                inner.map((v) => {
                  v.label = v.title
                  if (v.childrenTotal > 0) {
                    recursionFuc(inner)
                  }
                })
                i.children = inner
              })
            }
          })
          _this.treeData = arr
        }
      })
    },
    recursionFuc() {},

    handleNodeClick(data) {
      this.department = data.title
      this.$emit('getDepartId', data)
    },
    inputFocus() {
      this.visible = true
      // this.getDepartmentHandle();
    }
  }
}
</script>
<style scoped lang="scss"></style>