随笔- 250 文章- 10 评论- 124 阅读- 75万

el-autocomplete后台返回自定义字段展示

<el-autocomplete
         v-model="form.name"
         :fetch-suggestions="querySearch"
         clearable
         class="inline-input w-50"
         placeholder="Please Input"
         @select="handleSelect"
         style="width: 220px"
       >
         <template #default="{ item }">
           <div class="value">{{ item.name }}</div>
         </template>
       </el-autocomplete>

interface LineBody {
  id: string
  name: string
}
const lineBodys = ref<LineBody[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString ? lineBodys.value.filter(createFilter(queryString)) : lineBodys.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (lineBody) => {
    //return lineBody.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    return lineBody.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
  }
}
const loadAll = async () => {
  const results = await getLineBodys()
 
  return results.items
}
 
const handleSelect = (item: LineBody) => {
  form.value.name = item.name
}
 
onMounted(async () => {
  lineBodys.value = await loadAll()
})