component-lib/common/src/business-components/DynamicForm/src/components/Autocomplete.vue

<template>
  <span v-if="isLook">{{ select_look || '-' }}</span>
  <el-autocomplete
    v-else
    v-model="select"
    :value-key="field.label"
    :fetch-suggestions="querySearch"
    :disabled="disabled"
  />
</template>

<script setup lang="ts">
import { useOptions } from '../hooks/useOptions'

const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: () => ''
  },
  mode: {
    type: String,
    default: 'add'
  },
  formItem: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:modelValue'])

const { options, field, isLook, select, select_look } = useOptions(props, emits)

const querySearch = (queryString, cb) => {
  const results = queryString ? options.filter((i) => i[field.label] === queryString) : options
  // 调用 callback 返回建议列表的数据
  cb(results)
}
</script>