fe-manage/src/components/project/OrgClass.vue

<template>
  <a-tree-select
      :getPopupContainer="
                          (triggerNode) => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
      v-model:value="id"
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="自动带出 可修改"
      allow-clear
      :tree-data="options"
      :fieldNames="{
                children: 'treeChildList',
                label: 'name',
                value: 'id',
              }"
      :disabled="disabled"
      @change="change"
      dropdownClassName="treeDropdown"
  >
  </a-tree-select>
</template>
<script>
import {onMounted, reactive, toRefs, watch} from "vue";
import {useStore} from "vuex";

export default {
  name: "OrgClass",

  props: {
    value: {
      type: Number,
    },
    name: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  setup(props, ctx) {
    const store = useStore();

    const state = reactive({
      options: [],
      id: props.value
    });

    watch(props, () => {
      console.log('props', state)
      console.log('props', props)
      if (props.value !== state.id) {
        state.id = props.value
      }
    })
    onMounted(() => {
      state.options = [...store.state.orgtreeList]
      console.log(state.options)
    })

    function change(key, obj) {
      console.log(state)
      ctx.emit('update:name', obj[0])
      ctx.emit('update:value', key)
    }

    return {
      ...toRefs(state),
      change
    };
  },
};
</script>