kd-aiot-frontend/src/components/CommomSelect/category-select.vue

<!-- 部门树形选择下拉框 -->
<template>
  <ele-tree-select
    clearable
    :value="value || ''"
    :data="treeData"
    label-key="name"
    value-key="id"
    default-expand-all
    ref="treeSelect"
    :placeholder="placeholder"
    @input="updateValue"
    @change="changeChoose"
  />
</template>

<script>
  import { getTreeByPid } from '@/api/material/manage.js';
  export default {
    props: {
      // 选中的数据(v-model)
      value: [Number, String],
      // 提示信息
      placeholder: {
        type: String,
        default: '请选择'
      },
      pid: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        treeData: []
      };
    },
    created () {
      this.getData();
    },
    methods: {
      async getData () {
        const data = await getTreeByPid(this.pid);
        this.treeData = this.$util.toTreeData({
          data: data || [],
          idField: 'id',
          parentIdField: 'parentId'
        });
      },
      /* 更新选中数据 */
      updateValue (value) {
        this.$emit('input', value);
      },

      changeChoose (val) {
        this.$emit(
          'changeGroup',
          val,
          this.$refs.treeSelect.getNodeByValue(val)
        );
      }
    }
  };
</script>