VUE+element怎么开发后台管理的搜索功能

VUE+element怎么开发后台管理的搜索功能

这篇文章主要介绍“VUE+element怎么开发后台管理的搜索功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“VUE+element怎么开发后台管理的搜索功能”文章能帮助大家解决问题。

先看看样式图:

实现上面这种简单搜索简单的三步走:

1.页面样式:在页面中使用form表单的校验功能来实现输入搜索。给表单的数据放入搜索请求的data数组中,也就是searchParams这个大集合中。

备注:如果给每个输入框添加了搜索按钮的click方法,则会在输入完成后直接执行列表搜索。所以考虑自己使用的具体位置。

清空新建

清空功能则是清空搜索输入框的内容,实际上也是重置整个页面。区分是刷新页面还是不刷新。不刷新的话直接清空输入的内容,重置的话直接走一遍列表初始化加载。

2.JS配置内容:搜索和首次加载请求是一个接口,可以直接将参数合并起来,有搜索输入的内容就执行搜索,无内容则加载默认内容。清空搜索直接格式化表单。

data(){return{currentPage:1,totalResult:0,chanelList:[{value:0,name:'线上'},{value:1,name:'线下'},{value:2,name:'集采'}],searchParams:{remark:'',chanelName:'',chanelType:'',pageSize:10,pageIndex:0},}},created(){this.getList()},methods:{//获取列表数据num(下同):取的挪车的原型1-默认请求类型三方ID//网点名称storeNameIDcardIdgetList(){letmethod='GET'leturl=`/etcMan/channelList`letdd={channelName:this.searchParams.chanelName||'',channelType:this.searchParams.chanelType,remarks:this.searchParams.remark||'',pageIndex:this.searchParams.pageIndex||0,pageSize:this.searchParams.pageSize||10}this.axios({url:url+devCode,method:method,baseURL:baseUrl,params:dd}).then(res=>{res=res.datathis.tableData=res.data.pageListData?res.data.pageListData:[]this.totalResult=res.data.totalResult})},//搜索列表num(下同)submitSearch(){this.searchParams.pageIndex=0this.getList()this.currentPage=1},//格式化表单数据clearForm(){this.searchParams={chanelName:'',remark:'',chanelType:'',pageIndex:0,pageSize:10}},//清除列表的搜索表单clearListSearch(){this.clearForm()this.getList()},

3.就是进行调测,对搜索输入的参数进行对应,在特定值的情况下 搜索0或者别的值会被直接传成空,所以这个时候就要考虑列表请求的参数不写空,直接填进行搜索的参数名字。这个参数有就传没有就不传,避免出现为0或者别的值直接传成空的了。

关于“VUE+element怎么开发后台管理的搜索功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注恰卡编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

发布于 2022-04-15 22:32:33
分享
海报
32
上一篇:Mybatis怎么实现ResultMap结果集 下一篇:vue template中style背景设置不编译问题怎么解决
目录

推荐阅读

忘记密码?

图形验证码