element的el-autocomplete组件的使用（模糊匹配、自定义模板、远程搜索）

最新推荐文章于 2024-12-21 09:45:00 发布

小白_ysf

最新推荐文章于 2024-12-21 09:45:00 发布

阅读量2.4k

点赞数 9

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

本文链接：https://blog.csdn.net/weixin_41549971/article/details/135653189

版权

一、代码实现

<template>
    <div>
        <!-- trigger-on-focus 是否在输入框 focus 时显示建议列表 -->
        <!-- autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，
        在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。 -->
        <!-- fetch-suggestions 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 -->
        <el-row class="demo-autocomplete">
            <el-col :span="24">
                <div class="sub-title">激活即列出输入建议</div>
                <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容"
                    @select="handleSelect"></el-autocomplete>
            </el-col>
            <el-col :span="24">
                &l