我要评论一、需求
- el-form如果查询条件过多，影响页面的展示效果。
- 查询条件表单是我们系统中非常常见的功能，我们需要把它封装成一个通用的组件，方便在系统开发中提升开发效率。
- 除了在实现基本查询条件的功能上，还需要实现多条件的折叠和展开功能
二、效果图
三、 代码示例
封装查询条件表单组件 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) {
// 对文字进行处理
return '展开搜索'
} else {
return '收起搜索'
}
}
},
mounted() {
/**
* 收起搜索
*/
this.$nexttick(function() {
this.closesearch()
})
},
methods: {
closesearch() {
// this.showall = !this.showall;
this.$emit('closepop')
console.log('子组件的状态：' + 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="线索编号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="线索来源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="线索编号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="线索编号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="线索来源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="线索来源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="线索来源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="线索来源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="线索来源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="线索来源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="线索来源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="线索来源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="线索来源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="线索来源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="线索来源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="序号" 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="计划编号" :show-overflow-tooltip="true" align="center" />
<el-table-column prop="xszt" label="状态" align="center" min-width="100" />
</el-table-column></el-table>
<!--分页查询工具条-->
<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: '矿产'
}
],
options: [{
value: '1',
label: '动态巡查'
}, {
value: '2',
label: '电话举报'
}, {
value: '3',
label: '信访举报'
}, {
value: '4',
label: '媒体曝光'
}, {
value: '5',
label: '其他单位转交'
}, {
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('父组件的状态：' + this.showall)
}
}
}
</script>
<style>
.btnrow {
display: block;
}
.unbtnrow {
display: none;
}
</style>到此这篇关于vue2.0+elementui实现查询条件展开和收起功能组件的文章就介绍到这了,更多相关vue elementui查询条件展开和收起内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论