Vue.js 实现列表查询功能：结合接口获取数据和过滤

<template>
  <div>
    <el-autocomplete
      class="inline-input"
      v-model="searchvalue"
      :fetch-suggestions="querySearch"
      placeholder="输入抽样模板编码或名称"
      :trigger-on-focus="false"
      @select="handleQuery"
    ></el-autocomplete>
<pre><code>&lt;ul&gt;
  &lt;li v-for=&quot;voucherGroup in filteredVoucherGroupList&quot; :key=&quot;voucherGroup.voucherGroupId&quot;&gt;
    {{ voucherGroup.name }}
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchvalue: "",
      voucherGroupList: [], // 列表数据
      filteredVoucherGroupList: [], // 过滤后的列表数据
    };
  },
  methods: {
    querySearch(queryString, cb) {
      // 调用接口listVoucherGroup获取列表数据
      listVoucherGroup({ ...this.queryParams, searchString: queryString }).then((response) => {
        const filteredList = this.handleTree(response.data, 'voucherGroupId', 'parentId');
        cb(filteredList);
        this.filteredVoucherGroupList = filteredList;
      });
    },
    handleQuery(selectedItem) {
      // 处理查询结果
      console.log(selectedItem);
    },
  },
  computed: {
    queryParams() {
      return {
        accountsId: this.accountsId,
        // 其他查询参数
      };
    },
  },
  watch: {
    queryParams: {
      handler() {
        // 当查询参数改变时，重新获取列表数据
        this.getList();
      },
      deep: true,
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<p>在上述代码中，<code>filteredVoucherGroupList</code>用于存储过滤后的列表数据。在<code>querySearch</code>方法中，调用<code>listVoucherGroup</code>接口并传入搜索框的输入值，获取列表数据，并将数据赋值给<code>filteredVoucherGroupList</code>。在模板中使用<code>v-for</code>指令遍历<code>filteredVoucherGroupList</code>显示列表项。</p>
<p>另外，为了实现实时搜索，可以在<code>fetch-suggestions</code>属性中设置一个延迟执行的方法，例如使用<code>lodash</code>库的<code>debounce</code>方法对<code>querySearch</code>方法进行包装，以实现延迟搜索的效果。</p>