el-input批量搜索数据

为了实现el-input批量搜索数据，你可以使用Element UI的el-input组件结合Vue的双向数据绑定和事件监听。以下是一个简单的例子，展示了如何实现批量搜索功能：

<template>
  <div>
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      @input="handleSearch"
    ></el-input>
    <div v-for="item in filteredList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '',
      dataList: [
        { id: 1, name: '数据1' },
        { id: 2, name: '数据2' },
        // ...更多数据
      ],
    };
  },
  computed: {
    filteredList() {
      return this.dataList.filter((item) =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
  },
  methods: {
    handleSearch() {
      // 你可以在这里添加加载动画，实现异步搜索
    },
  },
};
</script>

在这个例子中，我们定义了一个dataList数组来存储所有的数据项，并使用v-model进行双向绑定。通过计算属性filteredList，我们实现了根据用户输入的内容对数据进行过滤的功能。每当用户在输入框中输入文字时，通过监听input事件，我们可以实时地进行搜索。

这个例子提供了一个基本框架，你可以根据实际需求进一步完善，比如增加更多的搜索条件、实现更复杂的过滤逻辑、添加分页支持等。