vue+iview选择下拉框中输入搜索词调用接口远程搜索

 

<Select 
    v-model="formValidate.marial" 
    class="perW20"
    filterable 
    :remote-method="remoteMethod" 
    @on-query-change='getAll'
    >
   <Option v-for="(item, index) in marialList" :value="item.name" :key="index">  
   {{item.name}}</Option>
</Select>
remoteMethod(){},
getAll(e){
 getList(data).then(res => {
      this.List = res.data
    })
   }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要创建一个下拉框组件,可以使用`<select>`标签或者其他UI库提供的下拉框组件。然后在组件,你需要定义一个选项列表,可以使用Vue的响应式数据来定义: ```typescript // OptionItem.ts export interface OptionItem { label: string; value: string; } // YourComponent.vue <template> <select v-model="selectedValue"> <option v-for="option in options" :value="option.value">{{ option.label }}</option> </select> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import { OptionItem } from './OptionItem'; export default defineComponent({ name: 'YourComponent', setup() { const state = reactive({ options: [] as OptionItem[], selectedValue: '', }); // 调用接口获取选项列表 const fetchOptions = async () => { const response = await fetch('your-api-url'); const data = await response.json(); state.options = data.options; }; fetchOptions(); return { options: state.options, selectedValue: state.selectedValue, }; }, }); </script> ``` 在`setup`函数,我们定义了一个响应式的状态对象`state`,其包括选项列表`options`和当前选的值`selectedValue`。在组件渲染时,我们使用`v-for`指令遍历选项列表并渲染每一个选项。 接着,我们在组件的`setup`函数调用接口获取选项列表,并将获取到的数据更新到状态对象。你需要根据你的实际情况,修改`fetchOptions`函数接口地址和返回数据结构。 最后,我们将`options`和`selectedValue`暴露出去,以便其他组件可以访问和使用它们。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值