项目中经常有这种搜索条件，每次都要写form 结构, 还要写查询，重置的方法，都是重复代码。
每次写起来都很繁琐、代码也夸张的多，而且多人开发情况下可控性太低;
所以考虑对 多条件搜索 做一个封装，统一配置引用，达到一次注册、全局使用，提升开发维护效率和界面统一的效果。
文末附加 一次注册全局使用 的方法。
image.png
image.png
对这种搜索条件进行了封装，支持在业务组件中异步加载下拉框数据。支持下拉框默认选中初始值。
添加了自动触发搜索的方法，能应对多种场景。
使用vue+elementUI，代码如下
BaseSearch.vue
<!--
*名称：弹窗的搜索条件组件
*功能：methods
1.点击搜索的方法：@search
2.搜索条件 props : formItemList
-->
<template>
<div class="dialog-search">
<el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
<el-form-item v-for="(item,index) in formItemList" :key="index" :label="item.label">
<el-select v-if="item.type=='select'" v-model="formInline[item.param]" placeholder="请选择" size="mini">
<el-option v-for="(item2,index2) in item.selectOptions" :key="index2" :label="item2.name" :value="item2.value"></el-option>
</el-select>
<el-input v-if="item.type=='input'" v-model="formInline[item.param]" size="mini" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item style="width:10rem">
<el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
<el-button type="" size="mini" @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
<!-- 可用于显示其他按钮 -->
<slot></slot>
</el-form>
</div>
</template>
<script>
export default {
name: "BaseSearch",
props:{
emitSearch:{ // 是否立即执行搜索
type: Boolean,
default: false
},
formItemList:{
type: Array,
default(){
return [
{
label: '下拉框',
type: 'select',
selectOptions:[{name:111,value:111}],
param: 'company',
defaultSelect: "222", // 下拉框默认选中项
},
{
label: '输入框',
type: 'input',
param: 'name'
}
]
}
}
},
data(){
let formInline={}
for(const obj of this.formItemList){
formInline[obj.param] = obj.defaultSelect || "";
}
return{
formInline,
}
},
watch:{
emitSearch(newVal,oldVal){ // 是否立即触发搜索 用在弹窗中异步请求下拉框后 或者给下拉框赋值默认值后 需要用到这个方法
if(newVal){
console.log("此时触发--立即执行搜索")
this.$emit("search", this.formInline);
}
},
formItemList:{
handler(newVal,oldVal){
for(const obj of this.formItemList){
if(obj.defaultSelect){
formInline[obj.param] = obj.defaultSelect
}
}
},
deep:true
}
},
methods:{
onSubmit() {
// console.log('submit!',this.formInline);
this.$emit('search',this.formInline)
},
resetForm(formName) {
this.$refs[formName].resetFields();
let formInline={}
for(const obj of this.formItemList){
// formInline[obj.param] = obj.defaultSelect || ""; // 重置时下拉框的默认值如果要保留就选用这个
formInline[obj.param] = ""; // 所有筛选条件清空
}
this.formInline=formInline
this.$emit('search',this.formInline)
}
}
}
</script>
<style lang="less" scoped>
.dialog-search{
margin: 0 1rem;
text-align: left;
/deep/ .el-form-item__content{
width: 16rem;
.el-input{
width: 16rem;
}
.el-select{
.el-input__inner{
// height: 3.2rem;
width: 16rem;
}
}
}
}
</style>
basesearch 组件大家也可以结合自己需要，再往里填充一些树形选择，单选框，复选框元素进去~~~
使用的时候只需要引入BaseSearch.vue
再传入formItemList，即能生成带下拉框和输入框的搜索条件，绑定search方法
<templete>
<BaseSearch :formItemList="formItemList" :emitSearch="emitSearch" @search="search" />
<BaseSearch :formItemList="formItemList" @search="search" >
<templete>
<span>这里有个slot，可以在重置后放其他按钮，比如“导出”。</span>
</templete>
</BaseSearch >
</templete>
<script>
import BaseSearch from "@/components/BaseSearch.vue"
export default {
components:{
BaseSearch
},
data() {
return {
dialogVisible: false,
emitSearch: false,
formItemList:[
{
label: '所属单位',
type: 'select',
selectOptions:[{name:111,value:111}],
param: 'company'
},
{
label: '化学品名称',
type: 'input',
param: 'name'
},
{
label: '是否停用企业',
type: 'select',
selectOptions:[{name:111,value:111}],
param: 'stop'
},
{
label: '下拉框222',
type: 'select',
selectOptions:[{name:111,value:111}],
param: 'parm222'
},
],
};
},
mounted(){
// 此时请求下拉框的数据接口
// axios。。。。
// this.formItemList[3].selectOptions = res.data
// 其他下拉框的选项赋值
// 这里判断 是否立即执行搜索
// 全部下拉框的数据都塞进去后执行搜索
// this.emitSearch=true
},
methods: {
handleOpen(typeVal){
this.dialogVisible=true
this.formItemList[3].defaultSelect=typeVal || "" // 打开弹窗时下拉框赋默认选中的值
this.emitSearch=true
},
handleClose(done) {
this.dialogVisible=false
},
search(params){ // 搜索条件改变时
this.searchTableList(params)
}
}
};
</script>
附加：全局注册组件的方法
全局注册后，不需要再引入BaseSearch ，直接用就行~
index.js
import BaseSearch from "./BaseSearch";
const array = [ BaseSearch];
const baseComponents = {
install(vue) {
for (let i = 0; i < array.length; i++) {
vue.component(array[i].name, array[i]);
}
},
};
export default baseComponents;
main.js
import baseComponents from "./components/index";
Vue.use(baseComponents);
持续更新中·
