前端 独立分页+检索功能实现

 

          <Input
            type="text"
            v-model="searchValue"
            :placeholder="$t('carouselItem.text205')"
            class="input_select"
            clearable
          />
        <Page
          class="pages"
          :total="total"
          :current="pageNo"
          :page-size="9"
          @on-change="pageChange"
        />

 watch: {
    searchValue(newVal, oldVal) {
      newVal = String(newVal).toLowerCase();
      this.traderList = this.allData.data.filter((item) => {
        return item.nickName.toString().toLowerCase().includes(newVal);
      });
      this.pageNo = 1;
      this.total = this.traderList.length
    },
  },
  computed: {
    // 当前页数据
    currentData() {
      if (!this.traderList) {
        return [];
      }
      const start = (this.pageNo - 1) * this.pageSize;
      const end = this.pageNo * this.pageSize;
      return this.traderList.slice(start, end);
    },
  },

 主要   用.toLowerCase()  不区分大小写      .includes  返回想要的数据