分页加模糊搜索

分页加模糊搜索

input框绑定

 <el-input placeholder="请输入内容" v-model="keyword"></el-input>

 <!-- 分页器 -->
    <div>
      <el-pagination
        @size-change="aaa"
        @current-change="bbb"
        :current-page="pagenum"
        :page-sizes="[1, 3, 5, 7, 9, 11]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

需要用到的参数

 data() {
    return {
      pagenum: 1,
      pagesize: 3,
      total: 0,
      keyword: "",
    };
  },

主要获取长度

 mounted() {
    this.$axios.get("/json/list1.json").then((res) => {
      console.log();
      this.users = res.users;
      this.total = res.users.length;
    });
  },

在 methods中定义的方法

    aaa(ine) {
      //每页显示条数
      this.pagesize = ine;
    },
  bbb(ine) {
      //当前页码
      this.pagenum = ine;
    },

计算属性
computed: {
    gooer() {
      let users = this.users;
      users = users.filter((item) => {
        return item.username.includes(this.keyword);
      });
      let el = (this.pagenum - 1) * this.pagesize;
      let ele = el + this.pagesize;
      return users.slice(el, ele);
    },
  },