下面是使用Vue实现搜索功能的完整代码:

<template>
  <div>
    <el-input
      v-show="showSearch"
      v-model="queryParams.voucherGroupName"
      placeholder="输入抽样模板编码或名称"
      clearable
      size="small"
      @keyup.native.enter="handleQuery"
      class="search-input"
      style="width: 200px; margin-right: 10px"
    />
    <div v-for="item in filteredVoucherGroupList" :key="item.voucherGroupId">
      {{ item.voucherGroupId }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        voucherGroupName: '',
      },
      voucherGroupList: [], // 抽样模板列表数据
    };
  },
  computed: {
    showSearch() {
      return this.voucherGroupList.length > 0;
    },
    filteredVoucherGroupList() {
      if (this.queryParams.voucherGroupName) {
        return this.voucherGroupList.filter((item) => {
          return (
            item.voucherGroupId.includes(this.queryParams.voucherGroupName) ||
            item.parentId.includes(this.queryParams.voucherGroupName)
          );
        });
      } else {
        return this.voucherGroupList;
      }
    },
  },
  methods: {
    handleQuery() {
      console.log(this.queryParams.voucherGroupName, "item");

      if (!this.queryParams.voucherGroupName) {
        return;
      }

      let param = {
        keyValue: this.queryParams.voucherGroupName,
      };

      listVoucherGroup(param)
        .then((res) => {
          console.log(res, "response");
          this.voucherGroupList = this.handleTree(
            res.data,
            "voucherGroupId",
            "parentId"
          );
        })
        .catch((error) => {
          console.error(error);
        });

      // this.getList();
    },
    handleTree(data, idKey, parentIdKey) {
      // 处理树形结构数据的方法
      // ...
    },
    getList() {
      // 获取抽样模板列表的方法
      // ...
    },
  },
};
</script>

在上面的代码中,filteredVoucherGroupList是一个计算属性,根据queryParams.voucherGroupNamevoucherGroupList进行过滤,返回过滤后的列表。

handleQuery方法在用户输入搜索内容后触发,根据输入的内容调用listVoucherGroup方法获取抽样模板列表数据,并将返回的数据处理为树形结构后赋值给voucherGroupList

注意:由于缺少相关代码,handleTreegetList方法需要根据实际情况进行实现

handleQueryitem consolelogitem item; if thissearchvalue return thisvoucherGroupListfilteritem = 根据抽样模板编码或名称进行过滤 return itemvouche

原文地址: https://www.cveoy.top/t/topic/iQHB 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录