<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() })
- 字段 el-autocomplete autocomplete 后台 el字段el-autocomplete autocomplete后台 el-autocomplete el-autocomplete autocomplete keydown native el-autocomplete autocomplete组件elementui v-model model el-autocomplete nameinputvalue el-autocomplete autocomplete组件vue 乱码el-upload后台upload 数据 字段 后台 名称 字段 表单el-form form 字段el-menu menu el