Element ui 候选输入框实现

最新推荐文章于 2023-09-15 18:37:54 发布

CV工程师!!

最新推荐文章于 2023-09-15 18:37:54 发布

阅读量154

点赞数 1

分类专栏： Element-UI 小tips 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_65607651/article/details/130517521

版权

Element-UI 小tips 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

类似这种效果

  <el-form-item label="关联地名:" prop="toponym">
                <!-- 远程搜索框 -->
               <el-select v-model="ruleForm.placeId"
                           placeholder="请输入关键字"
                           filterable
                           remote
                           clearable
                           :remote-method="remoteMethod"
                           style="width: 100%;"
                    >
                    <el-option-group
                        key="place"
                        label="相关道路" style="width: 200px;">
                        <el-option
                            //placeOptions 绑定的是后端接口请求的数据
                            v-for="item in placeOptions"
                            :key="item.id"
                            :label="item.standardPlaceName"
                            :value="item.id">
                            //使用插槽将候选内容插入进去
                             <template #default>
                                   {{ item.standardPlaceName }} {{item.regionData }}                
                                   {{item.categoryName}}
                            </template>
                        </el-option>
                    </el-option-group>
                </el-select>
                </el-form-item>

  // 远程搜索框
        remoteMethod(keyword) { 
                //keyword输入的内容
            getPlaceList({ "keyword": keyword }).then(res => {
                this.placeOptions = res.result.records
            })
        },