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();
},
刚开始学着写博客,有更好的建议望各位大哥多多指教
!