这篇文章主要介绍“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怎么开发后台管理的搜索功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。