elementuiplus select空间 远程搜索

需求：随意输入线路名称 远程搜索匹配到 下拉选择

 <el-form-item label="线路信息" prop="railWayInfo">
                    <el-select
                            clearable
                            v-model="value"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入线路信息"
                            :remote-method="remoteMethod"
                            :loading="loadingFlag"
                    >
                        <el-option
                                v-for="(item,index ) in optionsData"
                                :key="index"
                                :label="item.railwayName"
                                :value="item.railwayId"
                        />
                    </el-select>
                </el-form-item>

    const value = ref([])
    const list = ref([])
    const loadingFlag = ref(false)
    const optionsData = ref([])
    /** 查询 */
    const remoteMethod = (query) => {
        if (query) {
            loadingFlag.value = true
            setTimeout(() => {
                loadingFlag.value = false
                optionsData.value = list.value.filter((item) => {
                    console.log("item", item)
                    console.log("query", query)
                    return item.railwayName.includes(query)
                })
            }, 200)
        } else {
            optionsData.value = []
        }
    }
    /** 查询线路信息数据 */
    const getInputInfo = () => {
        getShowList({queryParams: null}).then(resp => {
            if (resp.code === 200 && resp.rows.length != 0) {
                list.value = resp.rows.map(item => {
                    return {'railwayId': item.id, 'railwayName': item.线路名称}
                })
            }
        });
    }

最后

以上就是疯狂路灯为你收集整理的elementuiplus select空间 远程搜索的全部内容，希望文章能够帮你解决elementuiplus select空间 远程搜索所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。