这篇文章主要为大家详细介绍了VUE+element开发后台管理的搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了VUE element后台管理搜索功能的具体代码，供大家参考，具体内容如下
先看看样式图：
实现上面这种简单搜索简单的三步走：
1.页面样式：在页面中使用form表单的校验功能来实现输入搜索。给表单的数据放入搜索请求的data数组中，也就是searchParams这个大集合中。
备注：如果给每个输入框添加了搜索按钮的click方法，则会在输入完成后直接执行列表搜索。所以考虑自己使用的具体位置。
<div class="search">
<el-form :inline="true" :model="searchParams" class="demo-form-inline">
<el-form-item>
<el-input v-model="searchParams.chanelName" style="width: 160px;" placeholder="请输入渠道名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchParams.remark" style="width: 180px;" placeholder="请输入备注内容关键词" clearable></el-input>
</el-form-item>
<el-form-item label="">
<el-select style="width: 160px" v-model="searchParams.chanelType" clearable @change="channelChange" placeholder="请选择渠道类型">
<el-option :label="item.name" :value="item.value" v-for="item in chanelList" :key="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button class="search-btn el-button--infoSearch" icon="el-icon-search" @click="submitSearch()"></el-button>
<el-button class="search-btn el-button--infoSearch" @click="clearListSearch">清空</el-button>
</el-form-item>
<el-form-item class="rBtn">
<el-button type="primary" @click="createItem('new')">新建</el-button>
</el-form-item>
</el-form>
<div class="clearFix"></div>
</div>
清空功能则是清空搜索输入框的内容，实际上也是重置整个页面。区分是刷新页面还是不刷新。不刷新的话直接清空输入的内容，重置的话直接走一遍列表初始化加载。
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
// 网点名称 storeName ID cardId
getList () {
let method = 'GET'
let url = `/etcMan/channelList`
let dd = {
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.data
this.tableData = res.data.pageListData ? res.data.pageListData : []
this.totalResult = res.data.totalResult
})
},
// 搜索列表 num(下同)
submitSearch () {
this.searchParams.pageIndex = 0
this.getList()
this.currentPage = 1
},
// 格式化表单数据
clearForm () {
this.searchParams = {
chanelName: '',
remark: '',
chanelType: '',
pageIndex: 0,
pageSize: 10
}
},
// 清除列表的搜索表单
clearListSearch () {
this.clearForm()
this.getList()
},
3.就是进行调测，对搜索输入的参数进行对应，在特定值的情况下 搜索0或者别的值会被直接传成空，所以这个时候就要考虑列表请求的参数不写空，直接填进行搜索的参数名字。这个参数有就传没有就不传，避免出现为0或者别的值直接传成空的了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Vue 封装防刷新考试倒计时组件的实现
- Vue3后台管理系统之创建和配置项目
- vue后台管理如何配置动态路由菜单
- Vue后台管理系统之实现分页功能示例
- Vue+Element的后台管理框架的整合实践
- vue后台管理添加多语言功能的实现示例
- Vue 电商后台管理项目阶段性总结(推荐)
- Vue考试系统的后台管理功能开发示例解读
