<template>
      <el-input v-model="searchBackEnd" clearable placeholder="请输入姓名" 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表格内容
       allPointData: [], //全部的endpoint表格内容，同上
      pointCols: [
        {
          prop: 'name',
          label: '名称',
          width: 200,
        },
        {
          prop: 'gender',
          label: '性别',
          width: 90,
        },{
          prop: 'check_time',
          label: '检查时间',
          width: 200,
        },{
          prop: 'status',
          label: '状态',
          width: 90,
        }
      ],
      currentPage: 1, //endpoints初始页
      pagesize: 10, //endpoints每页的数据
    }
  }，
  watch(){
      searchBackEnd(val){
        if(val !== ""){
          this.changeDisplayTable();
        }else{
          this.endPointData = this.allPointData;
        }
        this.currentPage = 1;
    },
  },
  methods:{
        //根据搜索内容展示表格
    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>

补充debounce的具体写法

/**
 * @param {*} fn  是我们需要包装的事件回调
 * @param {*} delay 是每次推迟执行的等待时间
 */
 export function debounce(fn, delay = 1000){
    // 定时器
    let timer = null;
    // 将debounce处理结果当作函数返回
    return function() {
      // 保留调用时的this上下文,调用时传入的参数
      const context = this, args = arguments;
      // 每次事件被触发时，都去清除之前的旧定时器
      if (timer !== null) {
        clearTimeout(timer);
        timer = null;
      }
      // 设立新定时器
      timer = setTimeout(function() {
        fn.apply(context, args);
      }, delay);
    };
  };