Vue + element.ui table 分頁功能+搜尋功能的實現

打算在這個表格裡面加上分頁的功能
廢話不多說直接上程式碼了，程式碼寫的比較亂，湊合看吧

<template>
  <div>
    <el-table :data="tableData2" style="width: 100%">
      <el-table-column label="Password" prop="Password"> </el-table-column>
      <el-table-column label="Name" prop="name"> </el-table-column>
      <el-table-column
        label="Nianji"
        prop="Nianji"
        column-key="Nianji"
        :filters="[
          { text: '大一', value: '大一' },
          { text: '大二', value: '大二' },
          { text: '大三', value: '大三' },
          { text: '大四', value: '大四' },
        ]"
        :filter-method="filterHandler_Nianji"
      >
      </el-table-column>
      <el-table-column
        label="Zhuanye"
        prop="Zhuanye"
        column-key="ZHuanye"
        :filters="[
          { text: '1', value: '1' },
          { text: '2', value: '2' },
          { text: '3', value: '3' },
          { text: '4', value: '4' },
          { text: '5', value: '5' },
          { text: '6', value: '6' },
          { text: '7', value: '7' },
        ]"
        :filter-method="filterHandler_Zhuanye"
      >
      </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            scope
            style="width: 80%"
            v-model="search"
            size="mini"
            placeholder="輸入關鍵字搜尋"
          />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 
      el-pagination 這個是table下面的分頁欄
      @next-click="handleNextClick"
      next-click 官方解釋是:	使用者點選上一頁按鈕改變當前頁後觸發
      當點選上一頁的時候，觸發next-click 呼叫了handleNextClick 方法
     -->
    <el-pagination
      @next-click="handleNextClick"
      @prev-click="handlePrevClick"
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      background
      layout="prev, pager, next"
      :total="tableData_length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          Password: "2016-05-02",
          name: "王小a",
          Nianji: "大二",
          Zhuanye: "5",
        },
        {
          Password: "2016-05-04",
          name: "王小b",
          Nianji: "大二",
          Zhuanye: "3",
        },
        {
          Password: "2016-05-01",
          name: "王小c",
          Nianji: "大二",
          Zhuanye: "1",
        },
        {
          Password: "2016-05-03",
          name: "王小d",
          Nianji: "大一",
          Zhuanye: "2",
        },
        {
          Password: "2016-05-02",
          name: "王小a",
          Nianji: "大二",
          Zhuanye: "5",
        },
        {
          Password: "2016-05-04",
          name: "王小b",
          Nianji: "大二",
          Zhuanye: "3",
        },
        {
          Password: "2016-05-01",
          name: "王小c",
          Nianji: "大二",
          Zhuanye: "1",
        },
        {
          Password: "2016-05-03",
          name: "王小d",
          Nianji: "大一",
          Zhuanye: "2",
        },
        {
          Password: "2016-05-02",
          name: "王小a",
          Nianji: "大二",
          Zhuanye: "5",
        },
        {
          Password: "2016-05-04",
          name: "王小b",
          Nianji: "大二",
          Zhuanye: "3",
        },
        {
          Password: "2016-05-01",
          name: "王小c",
          Nianji: "大二",
          Zhuanye: "1",
        },
        {
          Password: "2016-05-03",
          name: "王小d",
          Nianji: "大一",
          Zhuanye: "2",
        },
      ],
      search: "", //input的值
      currentpage: 1, //當前頁面
      tableData2: [], //嗯。。。
      tableData_length: 0, //總條目數
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.tableData.splice(index, 1);
    },
    //條件選擇
    filterHandler_Nianji(value, row, column) {
      //篩選年級
      const property = column["property"];
      return row[property] === value;
    },
    filterHandler_Zhuanye(value, row, column) {
      //篩選專業
      const property = column["property"];
      return row[property] === value;
    },
    handleCurrentChange(val) {
      //點選中間頁的按鈕 執行的方法
      this.currentpage = val;
      this.handleTableData();
    },
    handlePrevClick(val) {
      //點選向前的按鈕 執行的方法
      this.currentpage = val;
      this.handleTableData();
    },
    handleNextClick(val) {
      //點選向後的按鈕 執行的方法
      //val的值是傳遞進來的引數，如果是在第一頁，點選下一頁，這裡的val就是2
      //觸發該方法後，將val賦值給 currentpage, currentpage =>用來存放當前頁面值的量
      this.currentpage = val;
      //再呼叫handleTableData 方法
      this.handleTableData();
    },
    handleTableData() {
      //處理資料
      //這個方法是將tableData這個陣列裡的資料，按照每頁10條資料，進行處理
      //將this.tableData.length 賦值給 this.tableData_length(這個引數是和第65行的total進行繫結
      //total =>總條目數,你的資料能放幾頁，這個total就是多少)
      //根據currentpage去獲取 範圍內的資料 再把值賦值給 程式碼第3行的 tableData2
      this.tableData_length = this.tableData.length;
      this.tableData2 = this.tableData.slice(
        (this.currentpage - 1) * 10,
        this.currentpage * 10
      );
    },
    handleSearch(val) {
      let search = val;
      if (search == "") {
        //如果search不等於空
        this.tableData2 = this.tableData;
        this.tableData_length = this.tableData2.length;
      }
      if (search != "") {
        //如果search等於空
        this.tableData2 = this.tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        );
        this.tableData_length = this.tableData2.length;
      }
    },
  },
  watch: {
    //watch監視input輸入值的變化,只要是watch變化了 search()就會被呼叫
    search(newVal) {
      this.handleSearch(newVal);
    },
  },
  mounted() {
    this.tableData2 = this.tableData;
    this.tableData_length = this.tableData.length;
  },
};
</script>