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ù)進行對應，在特定值的情況下搜索0或者別的值會被直接傳成空，所以這個時候就要考慮列表請求的參數(shù)不寫空，直接填進行搜索的參數(shù)名字。這個參數(shù)有就傳沒有就不傳，避免出現(xiàn)為0或者別的值直接傳成空的了。

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

您可能感興趣的文章:

相關(guān)文章

vue中for循環(huán)更改數(shù)據(jù)的實例代碼(數(shù)據(jù)變化但頁面數(shù)據(jù)未變）
這篇文章主要介紹了vue中for循環(huán)更改數(shù)據(jù)的實例代碼(數(shù)據(jù)變化但頁面數(shù)據(jù)未變）的相關(guān)資料,需要的朋友可以參考下
2017-09-09
vue-cli使用stimulsoft.reports.js的詳細教程
Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設(shè)計，編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧
2021-12-12
vue項目中chunk-vendors.js提示報錯的查看方法(最新推薦)
在vue項目中,chunk-vendors.js報出的錯誤提示經(jīng)常會導致開發(fā)者困惑,正確查看錯誤的方法是從錯誤提示的詳細信息中找到報錯原因,下面給大家分享vue項目中chunk-vendors.js提示報錯的查看方法,感興趣的朋友一起看看吧
2024-12-12
vue中echarts3.0自適應的方法
這篇文章主要介紹了vue中echarts3.0自適應，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue3狀態(tài)管理之Pinia的入門使用教程
Pinia是Vue.js的輕量級狀態(tài)管理庫,比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關(guān)于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下
2022-04-04
Vue如何實現(xiàn)組件間通信
組件間通信簡單來說就是組件間進行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫挘褪峭ㄓ嵉囊环N方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進行組件間通信。
2021-05-05
這篇文章主要介紹了如何封裝axios form-data針對統(tǒng)一的formData入?yún)⒎绞剑哂泻芎玫膮⒖純r值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05