在Vue.js中,你可以使用Element UI的el-input组件结合计算属性来实现模糊查询

<template>
  <div>
    <el-input v-model="searchQuery" placeholder="请输入查询内容"></el-input>
    <div v-for="item in filteredList" :key="item">{{ item }}</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '', // 用于绑定el-input的模糊查询关键词
      itemList: ['AG47PB16000001', 'AG47PB16000011', 'AG47PB16000021', 'AK47PB16000004', 'AK47GB16000006', 'AG47PB16000002', 'AG47PB16000003', 'AG47PB16000004', 'AG47PB16000006'] // 假设的字符串编号数组
    };
  },
  computed: {
    // 使用计算属性来根据searchQuery的值筛选itemList
    filteredList() {
      return this.itemList.filter(item => item.includes(this.searchQuery));
    }
  }
};
</script>

在这个例子中,el-input的v-model绑定到了searchQuery变量上,这个变量用于存储用户的输入。计算属性filteredList根据searchQuery的值,使用数组的filter方法来创建一个新的数组,该数组包含与查询匹配的字符串编号。当用户在输入框中输入时,filteredList会实时更新,显示匹配的结果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值