Vue ant-design select组件搜索和远程数据结合

最新推荐文章于 2024-08-25 16:35:25 发布

原创最新推荐文章于 2024-08-25 16:35:25 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何使用Ant Design的A-Select组件实现实时搜索和自动补全功能，配合Vue实现教师名称的动态加载，并在表单中展示。通过API调用获取数据并更新选项，展示了完整的数据获取、处理和显示流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<a-form :model="form" :label-col="{ span: 5 }" labelAlign="left">
		<a-form-model-item label="Content">
			<a-select v-model="form.teach"
				showSearch
				allowClear
				size="large"
				:showArrow="false"
				:filterOption="false"
				:getPopupContainer="triggerNode => triggerNode.parentNode"
				:notFoundContent="teachFetching ? undefined : 'Not found'"
				@search="fetchTeachName"
				@change="changeTeachName"
				@focus="focusTeachName">
				<a-spin v-if="teachFetching" slot="notFoundContent" size="small" />
				<a-select-option v-for="(item, index) in teachNameList"
                	:value="item.realName"
                	:key="index">{{ item.realName }}</a-select-option>
        	</a-select>
		</a-form-model-item>
		<a-form-model-item>
			<a-button type="primary"
            	html-type="submit"
            	size="large"
            	@click="handleSubmit">Confirm</a-button>
		</a-form-model-item>
	</a-form>
	<div class="line-item">
		<span class="item-label label-teach">Content</span>
		
	</div>
</template>

<script>
import { debounce } from '@/utils/index'
import { postNameList, postSaveInfo } from '@/service/api/index'

export default {
	data() {
		return {
			form: {
				teach: undefined
			},
			teachFetching: false,
			teachNameList: [],
			teachLastFetchId: 0,
			teachName: '',
			teachId: 0
		}
	},
	methods: {
		doSearchTeachNameList(val) {
      		this.teachFetching = true
      		this.teachLastFetchId += 1
      		const fetchId = this.teachLastFetchId
      		postNameList({
      			systemName: val
      		})
      			.then(res => {
          			if (fetchId !== this.teachLastFetchId) return
          			this.teachFetching = false
          			this.teachNameList = res.data.records || []
        		})
        		.catch(() => {
          			this.teachNameList = []
          			this.teachFetching = false
        		})
    	},
    	fetchTeachName(val) {
      		debounce(this.doSearchTeachNameList(val), 800)
    	},
    	changeTeachName(val) {
      		this.teachName = val
      		this.teachNameList.find(item => {
        		if (item.systemName === this.teachName) {
          			this.teachId = item.id
        		}
      		})
    	},
    	focusTeachName() {
      		this.teachNameList = []
    	},
    	handleSubmit() {
    		postSaveInfo({
    			id: this.teachId || 0,
    			name: this.teachName || ''
    		})
    			.then(() => {
    				console.log('submit!')
    			})
    			.catch(err => {
    				console.log('err', err)
    			})
    	}
	}
}
</script>

<style lang="less" scoped></style>