Vue2.0+ElementUI實(shí)現(xiàn)查詢條件展開和收起功能組件(代碼示例)
更新時(shí)間：2025年01月23日 11:12:18 作者：熱忱1128
文章介紹了如何將查詢條件表單封裝成一個(gè)通用組件,以提高開發(fā)效率,組件支持多條件的折疊和展開功能,并提供了使用示例,感興趣的朋友一起看看吧
一、需求
- el-form如果查詢條件過(guò)多，影響頁(yè)面的展示效果。
- 查詢條件表單是我們系統(tǒng)中非常常見(jiàn)的功能，我們需要把它封裝成一個(gè)通用的組件，方便在系統(tǒng)開發(fā)中提升開發(fā)效率。
- 除了在實(shí)現(xiàn)基本查詢條件的功能上，還需要實(shí)現(xiàn)多條件的折疊和展開功能
二、效果圖
三、 代碼示例
封裝查詢條件表單組件 SearchButton.vue
<template>
<div>
<el-col :span="1.5" class="elrow">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini">查詢</el-button>
</el-form-item>
</el-col>
<el-col :span="1.5" class="elrow">
<el-form-item>
<el-button type="primary" icon="el-icon-refresh" size="mini">重置</el-button>
</el-form-item>
</el-col>
<el-col :span="1.5" class="elrow">
<el-form-item>
<el-button type="text" size="mini" @click="closeSearch">
{{ word }}
<i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'" />
</el-button>
</el-form-item>
</el-col>
</div>
</template>
<script>
export default {
props: {
showAll: {
type: Boolean,
defalut: true
}
},
computed: {
word: function() {
if (this.showAll === false) {
// 對(duì)文字進(jìn)行處理
return '展開搜索'
} else {
return '收起搜索'
}
}
},
mounted() {
/**
* 收起搜索
*/
this.$nextTick(function() {
this.closeSearch()
})
},
methods: {
closeSearch() {
// this.showAll = !this.showAll;
this.$emit('closepop')
console.log('子組件的狀態(tài)：' + this.showAll)
}
}
}
</script>
<style>
</style>使用查詢條件表單組件（引入組件即可）
<template>
<div class="app-container">
<el-row :gutter="20">
<el-form ref="condForm" :model="condForm" label-width="100px" :inline="true">
<el-row class="btnRow">
<el-col :span="6" class="elrow">
<el-form-item label="線索編號(hào)1" prop="xsbh" style="padding-left: 10px;">
<el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" />
</el-form-item>
</el-col>
<el-col :span="6" class="elrow">
<el-form-item label="線索類型1" prop="xslx">
<el-select v-model="condForm.xslx" size="mini" style="width: 160px;">
<el-option
v-for="item in xslxoptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源1" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" :class="!showAll ? 'btnRow' : 'unBtnRow'">
<el-form-item label="線索編號(hào)1" prop="xsbh" style="padding-left: 10px;">
<el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" />
</el-form-item>
</el-col>
<search-button v-show="showAll" :show-all="showAll" @closepop="closepop" />
</el-row>
<el-row :class="!showAll ? 'btnRow' : 'unBtnRow'">
<el-col :span="6" class="elrow">
<el-form-item label="線索編號(hào)2" prop="xsbh" style="padding-left: 10px;">
<el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" />
</el-form-item>
</el-col>
<el-col :span="6" class="elrow">
<el-form-item label="線索類型2" prop="xslx">
<el-select v-model="condForm.xslx" size="mini" style="width: 160px;">
<el-option
v-for="item in xslxoptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> <el-col :span="6" class="elrow">
<el-form-item label="線索來(lái)源2" prop="xsxz">
<el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<SearchButton v-show="!showAll" :show-all="showAll" @closepop="closepop" />
</el-row>
</el-form>
</el-row>
<el-table
ref="multipleTable"
:data="tableData"
size="medium"
:header-cell-style="{background:'#f5f7fa'}"
:height="tableHeight"
stripe
fit
highlight-current-row
border
style="width: 100%;height:50px"
>
<el-table-column type="selection" width="55" align="center" </el-table-column>
<el-table-column type="index" width="55" align="center" label="序號(hào)" min-width="209" />
<el-table-column label="查看" width="60" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" align="center">查看</el-button>
</template>
</el-table-column>
<el-table-column label="刪除" width="60" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" align="center">刪除</el-button>
</template>
</el-table-column>
<el-table-column prop="jhbh" label="計(jì)劃編號(hào)" :show-overflow-tooltip="true" align="center" />
<el-table-column prop="xszt" label="狀態(tài)" align="center" min-width="100" />
</el-table-column></el-table>
<!--分頁(yè)查詢工具條-->
<el-col :span="24" class="toolbar">
<el-pagination
style="margin-right: 8px;text-align: right;"
:page-sizes="pageSizes"
:page-size="pageSize"
:total="totalPage"
:current-page.sync="pageIndex"
background
layout="total, sizes, prev, pager, next, jumper"
/>
</el-col>
</div>
</template>
<script>
import SearchButton from '@/components/SearchButton/index.vue'
export default {
name: 'User',
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: {
SearchButton
},
data() {
return {
showAll: true,
tableData: [],
// 查詢條件form
condForm: {},
condition: '',
xslxoptions: [{
id: '1',
name: '土地'
},
{
id: '2',
name: '房屋'
},
{
id: '3',
name: '礦產(chǎn)'
}
],
options: [{
value: '1',
label: '動(dòng)態(tài)巡查'
}, {
value: '2',
label: '電話舉報(bào)'
}, {
value: '3',
label: '信訪舉報(bào)'
}, {
value: '4',
label: '媒體曝光'
}, {
value: '5',
label: '其他單位轉(zhuǎn)交'
}, {
value: '6',
label: '其他'
}],
pageIndex: 0,
pageSize: 0,
pageSizes: [20, 50, 100, 200],
totalPage: 0
// height: window.innerHeight - 200,
}
},
computed: {
tableHeight() {
if (this.showAll) {
return window.innerHeight - 140
} else {
return window.innerHeight - 200
}
}
},
methods: {
closepop() {
this.showAll = !this.showAll
console.log('父組件的狀態(tài)：' + this.showAll)
}
}
}
</script>
<style>
.btnRow {
display: block;
}
.unBtnRow {
display: none;
}
</style>到此這篇關(guān)于Vue2.0+ElementUI實(shí)現(xiàn)查詢條件展開和收起功能組件的文章就介紹到這了,更多相關(guān)Vue ElementUI查詢條件展開和收起內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目中使用flow做類型檢測(cè)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用flow做類型檢測(cè)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue3.0中Hook最常出現(xiàn)的使用實(shí)例
在Vue3的組合式API體系中,自定義Hooks是實(shí)現(xiàn)邏輯復(fù)用的核心機(jī)制,通過(guò)將重復(fù)的響應(yīng)式邏輯、副作用管理或狀態(tài)操作封裝為獨(dú)立函數(shù),開發(fā)者可以顯著提升代碼的可維護(hù)性與開發(fā)效率,這篇文章主要介紹了Vue3.0中Hook最常出現(xiàn)的使用實(shí)例,需要的朋友可以參考下2026-05-05
關(guān)于Vue3過(guò)渡動(dòng)畫的踩坑記錄
在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過(guò)渡動(dòng)畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3過(guò)渡動(dòng)畫踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)留言板todolist功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
最近在做一個(gè)vue的項(xiàng)目,碰到一點(diǎn)關(guān)于Map鍵值對(duì)傳參的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對(duì)傳參的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
解決ant-design-vue中menu菜單無(wú)法默認(rèn)展開的問(wèn)題
這篇文章主要介紹了解決ant-design-vue中menu菜單無(wú)法默認(rèn)展開的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue利用axios來(lái)完成數(shù)據(jù)的交互
這篇文章主要介紹了vue利用axios來(lái)完成數(shù)據(jù)的交互,本文通過(guò)實(shí)例代碼給大家講解數(shù)據(jù)交互方法及安裝方法,需要的朋友可以參考下2018-03-03
Vuejs 實(shí)現(xiàn)簡(jiǎn)易 todoList 功能 與 組件實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了Vuejs 實(shí)現(xiàn)簡(jiǎn)易 todoList 功能 與 組件，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
在本篇文章里小編給大家整理的是關(guān)于vue中使用rem布局代碼詳解知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10