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

这篇文章主要介绍“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"  placeholder="请输入渠道名称" clearable></el-input>        </el-form-item>        <el-form-item>            <el-input v-model="searchParams.remark"  placeholder="请输入备注内容关键词" clearable></el-input>        </el-form-item>        <el-form-item label="">          <el-select  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()            },

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

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