当前位置：首页 > article >正文

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

article 2024/9/30 1:22:10

<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会实时更新，显示匹配的结果。

查看全文

http://www.kler.cn/news/325353.html