fe-manage/src/components/growthpath/PostSelect.vue

<template>
  <a-select
  :getPopupContainer="
      (triggerNode) => {
        return triggerNode.parentNode || document.body;
      }
    "
    :mode="multiple"
    v-model:value="selectedValue"
    :style="{ width: width || '' }"
    placeholder="请选择岗位"
    :options="options"
    @change="onSelectChange"
    allowClear
    showArrow
    showSearch
  ></a-select>
</template>

<script>
import { ref, watch } from 'vue';
import { getStdPosition } from "@/api/growthpath"
export default {
  name: 'PostSelect',
  props: {
    value: String,
    multiple: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '',
    },
    isTrue: {
      type: Boolean,
      default: false,
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const selectedValue = ref(props.value);
    const options = ref([]);

    async function fetchOptions() {
      try {
        const data = await getStdPosition({positionName: ''})
        options.value = data.data.data.map((item) => {
          return {
            id: item.stdPosition,
            label: item.stdPositionName,
            value: item.stdPosition,
          };
        })
      } catch (error) {
        console.error('error', error);
      }
    }

    watch(props, () => {
      selectedValue.value = props.value;
    });

    fetchOptions();

    function onSelectChange(newVal,postList ) {
      emit('update:value', newVal);
      emit('update:postList', postList);
    }
    return {
      selectedValue,
      options,
      onSelectChange,
    };
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ant-select-selection-overflow {
  flex-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>