lanan-system-vue/src/views/repair/Components/StaffChoose.vue

<template>
  <el-select v-model="staffSelected" clearable filterable @blur="$emit('input-blur', $event)">
    <el-option v-for="staff in staffList" :key="staff.id" :label="staff.name" :value="staff.id"/>
  </el-select>
</template>

<script>

import {getStaffList} from "@/api/company/staff";

export default {
  name: "StaffChoose",
  props:{
    value: {
      type: Object,
    }
  },
  data() {
    return {
      staffList: [],
      staffSelected: undefined,
    }
  },
  watch:{
    staffSelected(val) {
      const staff = this.staffList.find(item => item.id === val);
      this.$emit("input", staff);
    },
    value(newVal){
      if (newVal){
        this.staffSelected = newVal.id
      }else {
        this.staffSelected = null
      }
    }
  },
  mounted() {
    this.listStaff()
  },
  methods: {
    async listStaff() {
      try {
        const res = await getStaffList()
        this.staffList = res.data
      } catch {
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>