表格分页展示+搜索功能

1.html部分使用了element的组件

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="search(input_box)"></el-table>
    <!-- 分页栏 -->
    <el-pagination
      :total="pagesizeCount"
      :page-size="pagesize"
      :current-page.sync="currpage"
      @current-change="getNewlist(currpage)"
    ></el-pagination>
  </div>
</template>

2.js部分

<script>
export default {
  data() {
    return {
      tableData: [], // 数据列表
      input_box: "", // 搜索内容
      currpage: 1, //当前页码
      pagesize: 10, //每页展示数目
      pagesizeCount: 0, //总条数
      proptype: "" //存放column.prop的字符串值
    };
  },
  mounted(){
    this.getList();
  },
  methods: {
    // axios请求数据
    getList() {
      this.$axios.get("api").then(res=>{ this.tableDate = res.data })
    },
    // 搜索功能
    search(input) {
      // ES6 方法String.prototype.includes('要包含的字符串'),如果包含，则返回 true ，否则返回 false
      if (input == "") {
        this.pagesizeCount = this.tableData.length; //需在渲染数据前设置总页数
        return this.tableData.slice((this.currpage - 1) * this.pagesize,this.currpage * this.pagesize);
      } else {
        var newtable = this.tableData.filter(item => {
          if (JSON.stringify(item.descrip).includes(input)) {
            return item;
          }
        });
        this.pagesizeCount = newtable.length;//重新设置总页数
        return newtable.slice((this.currpage - 1) * this.pagesize,this.currpage * this.pagesize);
      }
    },
    // 切换页数
    getNewlist(cpage) {
      this.currpage = cpage;
    },
  }
};
</script>