vue查询条件实现批量模糊查询

代码

<el-select>中,加上 filterable 即可(v-model.trim:是过滤输入的空格),clearable:输入框带清空输入内容的功能 

<span class="query-span">店铺:</span>

        <el-select filterable :multiple="true"  v-model="pagination.applyShops"  style="width: 150px">

            <el-option v-for="item in bindShops" :key="item.shopCode" :label="item.shopName" :value="item.shopCode"></el-option>

        </el-select>

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js中监听模糊查询可以使用watch监听input框的值的变化,然后通过debounce方法进行防抖处理,最后调用查询方法进行数据查询。 假设你有一个input框和一个用户列表,你想要实现根据输入框的值进行模糊查询用户的功能。首先,你需要在input框上绑定一个v-model指令,将输入的值绑定到data中: ```html <template> <div> <input v-model="keyword" type="text" placeholder="请输入关键字" /> <ul> <li v-for="user in userList" :key="user.id">{{ user.name }}</li> </ul> </div> </template> <script> export default { data() { return { keyword: "", userList: [] }; }, watch: { keyword: { handler: _.debounce(function(newVal, oldVal) { this.queryUsers(newVal); }, 300), immediate: false } }, methods: { queryUsers(keyword) { // 发送模糊查询请求,将结果保存到userList中 } } }; </script> ``` 在上面的代码中,首先绑定了一个v-model指令将input框的值绑定到keyword属性中。然后使用watch监听keyword属性的变化,通过debounce方法进行防抖处理,最后调用queryUsers方法进行数据查询。 需要注意的是,在handler函数中,使用了_.debounce方法进行防抖处理。这个方法需要引入lodash库,可以通过npm安装: ``` npm install --save lodash ``` 然后在组件中引入: ```javascript import _ from "lodash"; ``` 这样就可以实现监听模糊查询的功能了。当用户在input框中输入关键字时,会触发watch监听,然后进行防抖处理,最后调用queryUsers方法进行数据查询

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值