vue搜索框，搜索表格数据并展示

vue搜索框搜索表格数据并展示

我们先看看效果图

我这个是最近有个比赛要用到的，我在这里记录一下，不过这个我实现的是边搜索边实现的，也就是这个原因这个搜索有个缺陷就是搜索消耗性能比较的大，数据库的压力很大，由于时间原因，目前先这样，有时间会优化的（优化思路是要节流，就是要有时间差）。废话不多说上代码。

• 首先我们就是<el-input v-model="findName" class="search" prefix-icon="el-icon-search" placeholder="请输入姓名" /> -
  这里是input输入框动态绑定数据findname

data() {
return {
   findname: ''
}
}

这个是一个钩子函数这个是在页面加载完成之后对页面的dom节点进行操作（它与created有点区别感兴趣的童鞋可以去vue光网进行了解vue）

 mounted() {
    this.getEmployeeList();
  },

然后在这里我们进行后端接口的对接（函数写在methods里面）

getEmployeeList() {
      request({
        url: "这里是后端接口地址",
        method: "接口请求类型",
        data: {
           这里是参数
        }
      })
        .then(res => {
           console.log("这里是打印接口请求成功的数据",res)
        })
        .catch(err => {
          console.log("err===>", err);
          this.loading = false;
        });

这里有个watch监控数据变化然后调用数据后端接口进行数据展示

 watch: {
    findName() {
      this.getEmployeeList();
    },

刚开始学着写博客，有更好的建议望各位大哥多多指教
！