elementUI模糊查询下拉选中

JS

     querySearch(queryString,cb) {
        if(queryString){
            Api.JHAjAx({
                reelCode:queryString,
                status:1
            }).then(res=>{
                console.log(res.data)
                if(res.data.code == 0){
                    let arr = res.data.dataList.rows;
                    cb(arr)
                }
            })
        }else{
            cb([]);
        }
      },
      handleSelect(item){
          console.log(item)
          if(item){
             this.state2 = item.reelCode;
          // this.bianjiDialogHeJinZhuangTai = item.
          this.bianjiDialogTouRuLiang = item.weight;
          this.bianjiDialogPeiLiaoGuiGe = item.spec;
          }
      },

html

		 <el-autocomplete
                class="inline-input"
                v-model="state2"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              >
                  <template slot-scope=" {item} ">
                      <span>{{item.reelCode}}</span>
                  </template>
          </el-autocomplete>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI中,可以使用它的下拉择组件来实现模糊下拉查询和多的功能。 首先,我们需要在页面中引入ElementUI下拉择组件。可以使用以下代码: ``` <template> <el-select v-model="selectedItems" multiple filterable remote @remote-method="searchItems" :remote="fetchItems"> <el-option v-for="item in items" :label="item.name" :key="item.id" :value="item.id"></el-option> </el-select> </template> ``` 在上面的代码中,我们使用了`el-select`组件来实现下拉择功能。设置`multiple`属性可以开启多模式,设置`filterable`属性可以开启模糊查询模式。通过`v-model`指令可以绑定选中的值。 接下来,我们需要在Vue组件的`data`项中定义相关的数据和方法。可以使用以下代码: ``` <script> export default { data() { return { selectedItems: [], // 选中的值 items: [], // 下拉择的所有项 // 模拟远程获取项的方法 fetchItems(query) { // 在这里可以发送异步请求获取匹配的项 // 将项赋值给 this.items }, // 模糊查询项的方法 searchItems(query) { // 在这里可以过滤出匹配的项 // 将过滤后的项赋值给 this.items } }; } }; </script> ``` 在上述代码中,我们定义了`selectedItems`数组来存储已选中的值,`items`数组来存储下拉项的所有值。同时,我们通过`fetchItems`方法模拟了异步获取项的过程,可以在其中发送实际的异步请求获取匹配的项。而`searchItems`方法用于模糊查询过滤项。 最后,根据实际需求,可根据 `fetchItems` 和 `searchItems` 内部逻辑来设置异步请求和模糊查询的实现。通过以上代码,我们可以在ElementUI中实现模糊下拉查询和多的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值