elementuiplus select空间远程搜索

最新推荐文章于 2024-03-06 19:18:13 发布

一株木樨

最新推荐文章于 2024-03-06 19:18:13 发布

阅读量703

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/fortunate_leixin/article/details/126627035

版权

vue3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求：随意输入线路名称远程搜索匹配到下拉选择
在这里插入图片描述

 <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.线路名称}
                })
            }
        });
    }