VUE+element開發(fā)后臺管理的搜索功能

更新時間：2022年04月15日 11:31:22 作者：沉默的小猴子

這篇文章主要為大家詳細介紹了VUE+element開發(fā)后臺管理的搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了VUE element后臺管理搜索功能的具體代碼，供大家參考，具體內(nèi)容如下

先看看樣式圖：

實現(xiàn)上面這種簡單搜索簡單的三步走：

1.頁面樣式：在頁面中使用form表單的校驗功能來實現(xiàn)輸入搜索。給表單的數(shù)據(jù)放入搜索請求的data數(shù)組中，也就是searchParams這個大集合中。

備注：如果給每個輸入框添加了搜索按鈕的click方法，則會在輸入完成后直接執(zhí)行列表搜索。所以考慮自己使用的具體位置。

<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="請輸入備注內(nèi)容關(guān)鍵詞" 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>

清空功能則是清空搜索輸入框的內(nèi)容，實際上也是重置整個頁面。區(qū)分是刷新頁面還是不刷新。不刷新的話直接清空輸入的內(nèi)容，重置的話直接走一遍列表初始化加載。

2.JS配置內(nèi)容：搜索和首次加載請求是一個接口，可以直接將參數(shù)合并起來，有搜索輸入的內(nèi)容就執(zhí)行搜索，無內(nèi)容則加載默認內(nèi)容。清空搜索直接格式化表單。

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: {
? ? ? ? ? ? // 獲取列表數(shù)據(jù) num(下同):取的挪車的原型 1-默認請求類型三方ID
? ? ? ? ? ? // 網(wǎng)點名稱 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
? ? ? ? ? ? },
? ? ? ? ? ? // 格式化表單數(shù)據(jù)
? ? ? ? ? ? clearForm () {
? ? ? ? ? ? ? ? this.searchParams = {
? ? ? ? ? ? ? ? ? ? chanelName: '',
? ? ? ? ? ? ? ? ? ? remark: '',
? ? ? ? ? ? ? ? ? ? chanelType: '',
? ? ? ? ? ? ? ? ? ? pageIndex: 0,
? ? ? ? ? ? ? ? ? ? pageSize: 10
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 清除列表的搜索表單
? ? ? ? ? ? clearListSearch () {
? ? ? ? ? ? ? ? this.clearForm()
? ? ? ? ? ? ? ? this.getList()
? ? ? ? ? ? },

3.就是進行調(diào)測，對搜索輸入的參數(shù)進行對應(yīng)，在特定值的情況下搜索0或者別的值會被直接傳成空，所以這個時候就要考慮列表請求的參數(shù)不寫空，直接填進行搜索的參數(shù)名字。這個參數(shù)有就傳沒有就不傳，避免出現(xiàn)為0或者別的值直接傳成空的了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: