<template>
      <el-input v-model="searchBackEnd" clearable placeholder="請(qǐng)輸入姓名" style="width: 200px"></el-input>
      <el-table
        border
        stripe
        ref="endpointTable"
        element-loading-text="拼命加載中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="endPointData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        style="font-size: 13px;margin-top: 20px"
        :header-cell-style="{'background-color' : '#f5f7fa','color':'#000'}"
        max-height="700px"
      >
        <el-table-column
          v-for="(item, index) in pointCols"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 100, 200, 300, 400, 500]"
        :page-size="pagesize"
        layout="sizes,prev, pager, next"
        :total="endPointData.length"
        background
        style="text-align: right; margin: 0.5rem"
      ></el-pagination>
</template>
<script>
import {debounce} from '@/utils/utils';
export default {
  data(){
    return{
        searchBackEnd: '',//搜索后端的值
       endPointData: [], //endpoint表格內(nèi)容
       allPointData: [], //全部的endpoint表格內(nèi)容刘急，同上
      pointCols: [
        {
          prop: 'name',
          label: '名稱',
          width: 200,
        },
        {
          prop: 'gender',
          label: '性別',
          width: 90,
        },{
          prop: 'check_time',
          label: '檢查時(shí)間',
          width: 200,
        },{
          prop: 'status',
          label: '狀態(tài)',
          width: 90,
        }
      ],
      currentPage: 1, //endpoints初始頁
      pagesize: 10, //endpoints每頁的數(shù)據(jù)
    }
  }庄岖，
  watch(){
      searchBackEnd(val){
        if(val !== ""){
          this.changeDisplayTable();
        }else{
          this.endPointData = this.allPointData;
        }
        this.currentPage = 1;
    },
  },
  methods:{
        //根據(jù)搜索內(nèi)容展示表格
    changeDisplayTable: debounce (
      function (){
        let allData = this.allPointData, val = this.searchBackEnd;
        this.endPointData = [];
        allData.forEach((item) => {
          if (item.name.indexOf(val) != -1 ) {
            this.endPointData.push(item);
          }
        });
      },1000),
    // --------------分頁
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
}
</script>

補(bǔ)充debounce的具體寫法

/**
 * @param {*} fn  是我們需要包裝的事件回調(diào)
 * @param {*} delay 是每次推遲執(zhí)行的等待時(shí)間
 */
 export function debounce(fn, delay = 1000){
    // 定時(shí)器
    let timer = null;
    // 將debounce處理結(jié)果當(dāng)作函數(shù)返回
    return function() {
      // 保留調(diào)用時(shí)的this上下文,調(diào)用時(shí)傳入的參數(shù)
      const context = this, args = arguments;
      // 每次事件被觸發(fā)時(shí)府框，都去清除之前的舊定時(shí)器
      if (timer !== null) {
        clearTimeout(timer);
        timer = null;
      }
      // 設(shè)立新定時(shí)器
      timer = setTimeout(function() {
        fn.apply(context, args);
      }, delay);
    };
  };