Vue项目中线上搜索接口不可用，提供搜索和搜索后可以分页功能的解决方法。

项目技术：html5、css3、javascript、vue、less、node.js

1、结构使用Element ui框架

//搜索结构
 <el-input
        placeholder="请输入搜索内容## "
        clearable
        @clear="clearKey()"
        v-model="keyword"
        class="input-with-select"
        style="width: 400px"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search()"
        ></el-button>
      </el-input>
 // 分页结构
  <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

2、methods中定义方法

clearkey() {
      this.keyword = "";
      this.isSearch = false;
      this.load();
    },
    search() {
      this.isSearch = true;
      // 清空原数据列表数据
      this.arr = [];
      // 重新请求全部的列表数据
      this.$axios
        .get("orders", {
          params: {
            pagenum: 1,
            pagesize: 100,
          },
        })
        .then((res) => {
          // 定义数组，可用使用数组filter,indexof方法，模糊查找符合条件的数据
          let arr = res.data.data.goods.filter((item) => {
            return item.order_number.indexOf(this.keyword) >= 0;
          });
          // 分页时数据只有一页
          if (arr.length <= this.pagesize) {
            this.arr = arr
          } else {
            // 多页时可用使用数组的slice方法使用公式:从(pagenum-1)*pagesize开始，到pagenum*pagesize前结束
            this.arr = arr.slice(
              (this.pagenum - 1 )* this.pagesize,
               this.pagenum * this.pagesize
            );
          }
          // 分页总条数
          this.total = arr.length;
        });
    }

3、定义分页方法

 handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      // data中定义isSearch变量为false，
      if (this.isSearch) {
        // 通过变量控制页面渲染搜索内容还是全部内容
        this.search();
      } else {
        this.load();
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      if (this.isSearch) {
        this.search();
      } else {
        this.load();
      }
    },