下拉框里的树示例

<template>
  <el-aside width="230px" style="overflow-x: hidden; overflow: hidden">
    <ht-select
      v-model="selectOrgId"
      class="org-select"
      :options="orgList"
      @change="handSelectChange"
    />
    <ht-tree
      ref="htTree"
      class="orgTree"
      :data="treeData"
      :props="defaultProps"
      node-key="id"
      highlight-current
      :expand-on-click-node="false"
      :support-filter="true"
      @node-click="orgTreeClick"
      @refresh="handleRefresh"
    ></ht-tree>
  </el-aside>
</template>

<script>

  export default {
    name: 'LoadTree',
    data() {
      return {
        // 树状下拉框
        selectOrgId: '',
        orgList: [
          {
            key: 'dq',
            value: '地区维度',
          },
        ],
        // 树状列表
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name',
        },
      }
    },
    mounted() {
      this.getAllDemList()
    },
    methods: {
      // 获取组织列表
      getAllDemList() {
       
      },
      // 获取组织树
      loadTreeData(cb) {
       
      },
      // 获取地区树
      getInitTree() {
       
      },
      // 下拉框选择
      handSelectChange(row) {
        this.selectOrgId = row
        if (row == 'dq') {
          this.defaultProps.label = 'label'
          this.getInitTree()
        } else {
          this.loadTreeData()
          this.defaultProps.label = 'name'
        }
      },
      // 节点点击
      orgTreeClick(orgbytree) {
        this.$emit('orgTreeClick', orgbytree, this.selectOrgId)
      },
      // 刷新
      handleRefresh(cb) {
        if (this.selectOrgId == 'dq') {
          this.getInitTree()
        } else {
          this.loadTreeData(cb)
        }
        this.$emit('handleRefresh', cb)
      },
    },
  }
</script>