Vue实现模糊搜索
有时百感交集,却又百口模辩,那些很远的事,仿佛就在昨天
模糊搜索! 模糊搜索!! 模糊搜索!!!调取后端搜索接口
Hello大家好小白一枚,有写的不好的地方请多多指教
话不多说
结构
搜索框
<Input search :placeholder="roleManagementVal.searchValue" class="headerInputg" v-model="selectVal" 双数据绑定 @input="handlChange()" 输入框事件这个事件是输入值之后才会触发的 />
搜索按钮
<Button type="primary" style="height:100%;margin-top:-6px;width:97px;font-size:15px" @click="reset()" 点击事件 >{{ roleManagementVal.search }}</Button >
事件
// 清空搜索框展示数据 判断输入框是否为空如果是空展示所有数据( 也就是重新调一下查看接口 )
handlChange() {
if (this.selectVal == "") {
this.getList();
console.log(this.getList(), "清空搜索框展示数据");
}
},
// 模糊搜索 点击事件
reset() {
if (!this.selectVal) {
this.$message.error("请输入查询条件");
} else {
this.dim();
}
},
// 查看接口 === 搜索接口
dim() {
let val = {
name: this.selectVal //把搜索框的值传给后端
};
this.$ajax.post("/role/list", val).then(res => {
this.roleManagementList = res.data.data; //与查看接口一致 这步是不能少的
//如果有分页,调一下分页方法
this.分页方法(),
console.log(this.roleManagementList, "模糊搜索================");
});
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步