VUE+element怎么開發(fā)后臺(tái)管理的搜索功能

這篇文章主要介紹“VUE+element怎么開發(fā)后臺(tái)管理的搜索功能”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“VUE+element怎么開發(fā)后臺(tái)管理的搜索功能”文章能幫助大家解決問題。

先看看樣式圖：

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

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

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

<div class="search">
    <el-form :inline="true" :model="searchParams" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="searchParams.chanelName"  placeholder="請(qǐng)輸入渠道名稱" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="searchParams.remark"  placeholder="請(qǐng)輸入備注內(nèi)容關(guān)鍵詞" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select  v-model="searchParams.chanelType" clearable @change="channelChange" placeholder="請(qǐng)選擇渠道類型">
            <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)容，實(shí)際上也是重置整個(gè)頁面。區(qū)分是刷新頁面還是不刷新。不刷新的話直接清空輸入的內(nèi)容，重置的話直接走一遍列表初始化加載。

2.JS配置內(nèi)容：搜索和首次加載請(qǐng)求是一個(gè)接口，可以直接將參數(shù)合并起來，有搜索輸入的內(nèi)容就執(zhí)行搜索，無內(nèi)容則加載默認(rèn)內(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-默認(rèn)請(qǐng)求類型三方ID
            // 網(wǎng)點(diǎn)名稱 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.就是進(jìn)行調(diào)測(cè)，對(duì)搜索輸入的參數(shù)進(jìn)行對(duì)應(yīng)，在特定值的情況下 搜索0或者別的值會(huì)被直接傳成空，所以這個(gè)時(shí)候就要考慮列表請(qǐng)求的參數(shù)不寫空，直接填進(jìn)行搜索的參數(shù)名字。這個(gè)參數(shù)有就傳沒有就不傳，避免出現(xiàn)為0或者別的值直接傳成空的了。

關(guān)于“VUE+element怎么開發(fā)后臺(tái)管理的搜索功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。