此搜索项组件包含了几个常见类型 el-input el-select el-date-picker el-checkbox el-radio-group 以及 自定义化的一些组件如rangeInput类型为范围值输入款,可传入两个字段如下图中的发券张数字段,把三个代码块复制好改改引入路径,就能看到效果
页面效果:
组件:topSearcher.vue
<!-- vue2+elementUI顶部可收起展开搜索组件 -->
<template><el-form:inline="true"size="small":model="formInline"class="demo-form-inline"ref="formInline"><divclass="search-conditions":class="{ expanded: isExpanded }":style="{ maxHeight: needMaxHeight ? '53px' : 'none' }"><el-form-item:style="{flex: `0 0 calc(${item.spanPercentage || spanPercentage}% - 20px)`,}":label="item.label":label-width="item.labelWidth || 'auto'"v-for="item in searchOptions":key="item.key":prop="item.key"><el-inputv-if="item.type == 'input'"v-model="formInline[item.key]":isClearable="item.dontClearable ? false : true"></el-input><div class="range-input" v-else-if="item.type == 'rangeInput'"><el-col :span="11"><el-form-item :prop="item.key1"><el-inputv-model="formInline[item.key1]"placeholder="请输入"size="small"clearable></el-input></el-form-item></el-col><el-col class="line" :span="2" style="text-align: center">-</el-col><el-col :span="11"><el-form-item :prop="item.key2"><el-inputv-model="formInline[item.key2]"placeholder="请输入"size="small"clearable></el-input></el-form-item></el-col></div><el-selectv-else-if="item.type == 'select'"v-model="formInline[item.key]"@change="selectChange(item)"><el-option:isClearable="item.dontClearable ? false : true"v-for="iitem in item.options":key="iitem.value":label="iitem.label":value="iitem.value"></el-option></el-select><el-date-pickerv-else-if="item.type == 'datetimeRange'"size="small"v-model="formInline[item.key]"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm'":format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm'":default-time="['00:00:00', '23:59:00']"></el-date-picker><el-date-pickerv-else-if="item.type == 'dateRange'"size="small"style="flex: 1"v-model="formInline[item.key]"value-format="yyyy-MM-dd"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":clearable="item.clearable"></el-date-picker><!-- 有指定时间格式就用指定格式,否则用默认的格式 --><el-date-pickerv-else-if="item.type == 'date' || item.type == 'datetime'"size="small"v-model="formInline[item.key]":type="item.type"placeholder="选择日期":value-format="item.valueFormat? item.valueFormat: item.type == 'date'? 'yyyy-MM-dd': 'yyyy-MM-dd HH:mm'":format="item.valueFormat? item.valueFormat: item.type == 'date'? 'yyyy-MM-dd': 'yyyy-MM-dd HH:mm'"></el-date-picker><div class="check-box" v-else-if="item.type == 'checkBox'"><el-col:span="iitem.span ? iitem.span : 8"v-for="iitem in item.options":key="iitem.key"><el-form-item :prop="iitem.key"><el-checkbox@change="checkboxChange(item)"v-model="formInline[iitem.key]">{{ iitem.label }}</el-checkbox></el-form-item></el-col></div><el-radio-groupv-model="formInline[item.key]"@change="radioChange(item)"v-else-if="item.type == 'radioGroup'"><el-colv-for="(iitem, index) in item.options":key="iitem.key":span="iitem.span ? iitem.span : 8"><el-radio :label="iitem.value" :key="index">{{iitem.label}}</el-radio></el-col></el-radio-group></el-form-item></div><el-form-item style="text-align: right"><el-buttontype="primary"icon="el-icon-search":disabled="queryDisabled"@click="onQuery">查询</el-button><el-button icon="el-icon-refresh" @click="onReset('formInline')">重置</el-button><!-- <el-button @click="toggleExpand" v-if="searchOptions.length > 3">{{ isExpanded ? "收起搜索项" : "展开搜索项" }}</el-button> --><spanstyle="cursor: pointer; color: #66b1ff; margin-left: 10px"@click="toggleExpand"v-if="needMaxHeight">{{ isExpanded ? "收起" : "展开" }}<istyle="color: #66b1ff":class="isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span></el-form-item></el-form>
</template>
<script>
export default {name: "topSearcher",data() {return {waitShow: false,searchHeight: 53,// 初始化 formInline 对象，包含所有可能的属性,必须用$set来设置属性否则无法实现响应式,页面表现就是输入框数据不会更新,输入无效果formInline: this.initializeFormInline(),isExpanded: false,};},props: {//搜索项占宽百分比(在searchOptions中也有此字段,用于单独设置某个搜索项的宽度,如时间范围这种比较长的)spanPercentage: {type: Number,default: 33,},//搜索项searchOptions: {type: Array,required: true,},//禁用搜索queryDisabled: {type: Boolean,default: false,},},computed: {needMaxHeight() {// 判断是否需要设置最大高度用于实现收起展开的效果return this.searchHeight > 53 ? true : false;},},mounted() {// 获取未收缩的搜索条件高度（一行53px）const element = document.querySelector(".search-conditions");// 获取元素的高度const height = element.offsetHeight;if (height) {this.searchHeight = height;}this.$nextTick(() => {this.waitShow = true;});console.log("this.formInline", this.formInline);},methods: {initializeFormInline() {// 使用 reduce 方法初始化 formInline 对象return this.searchOptions.reduce((acc, item) => {switch (item.type) {case "rangeInput":this.$set(acc,item.key1,item.value1 !== undefined && item.value1 !== null? item.value1: "");this.$set(acc,item.key2,item.value2 !== undefined && item.value2 !== null? item.value2: "");break;case "checkBox":item.options.forEach((iitem) => {this.$set(acc,iitem.key,iitem.value !== undefined && iitem.value !== null? iitem.value: "");});break;default:this.$set(acc,item.key,item.value !== undefined && item.value !== null ? item.value : "");break;}return acc;}, {});},//重置搜索条件事件onReset(formName) {this.$nextTick(() => {this.$refs[formName].resetFields();this.$emit("onReset", this.formInline);});},//查询事件onQuery() {this.$emit("onQuery", this.formInline);},//普通select下拉框change事件selectChange(item) {this.$emit("selectChange", item);},//多选框change事件checkboxChange(item) {this.$emit("checkboxChange", item);},//单选框change事件radioChange(item) {this.$emit("radioChange", item);},toggleExpand() {this.isExpanded = !this.isExpanded;this.$emit("toggle", this.isExpanded); // 抛出点击事件},},
};
</script>
<style>
.demo-form-inline {width: 100%;display: flex;flex-wrap: wrap;justify-content: right;.el-form-item {/* 每个项目占据 1/3 的宽度，减去间距 */display: flex;flex: 0 0 calc(33.333% - 20px);margin: 10px;box-sizing: border-box;text-align: left;.el-form-item__label {width: 30%;/* 如果需要文字通过调整间距实现等宽 *//* text-align: justify;text-justify: distribute-all-lines;text-align-last: justify;font-weight: bold; */}.el-form-item__content {flex: 1;.el-select,.el-date-editor,.el-range-editor {width: 100%;}.el-radio-group {width: 100%;}}}.search-conditions {/* 一行的高度 *//* max-height: 53px; */position: relative;width: 100%;display: flex;flex-wrap: wrap;justify-content: flex-start;overflow: hidden;transition: max-height 0.3s ease; /* 平滑过渡效果 */}.search-conditions.expanded {max-height: none !important; /* 展开时移除最大高度限制 */}
}
.range-input {.el-form-item {margin: 0 !important;.el-form-item__content {width: 100% !important;}}
}
.check-box {.el-form-item {margin: 0 !important;.el-form-item__content {width: 100% !important;}}
}
.fixed-width {width: 200px; /* 设置一个固定的宽度 */border: 1px solid #000; /* 添加边框以便观察效果 */padding: 5px; /* 添加内边距 */box-sizing: border-box; /* 防止 padding 和 border 影响宽度 */
}
</style>
父组件调用示例:
<template><AHMF :asideWidth="400" :AShow="false" :rightTitleShow="false"><template #aside><div><el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input><el-treeclass="filter-tree":data="treeData":props="defaultProps"default-expand-all:filter-node-method="filterNode"ref="tree"></el-tree></div></template><template #header><topSearcher@toggle="toggle":searchOptions="searchOptions"@onQuery="onQuery"@onReset="onReset":spanPercentage="20"></topSearcher></template><template #main><el-table:data="tableData"borderstyle="width: 100%":height="tableHeight"v-loading="tableLoading"><el-table-column fixed prop="date" label="日期"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="province" label="省份"> </el-table-column><el-table-column prop="city" label="市区"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column fixed="right" label="操作"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></template><template #footer><div class="flex"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div></template></AHMF>
</template>
<script>
import topSearcher from "@/components/Container/topSearcher.vue";
import AHMF from "@/components/Container/AHMF.vue";
export default {components: {AHMF,topSearcher,},data() {return {filterText: "",searchOptions: [{type: "input",label: "车牌号",key: "carNumber",value: "",},{type: "select",label: "启用状态",key: "isEnable",value: "",options: [{ label: "已停用", value: "0" },{ label: "已启用", value: "1" },],},{type: "rangeInput",label: "发券张数",key1: "couNumMin",key2: "couNumMax",value1: "",value2: "",},{type: "datetimeRange",label: "订单时间1",key: "orderTime1",valueFormat: "yyyy-MM-dd HH:mm:ss",spanPercentage: 40,value: [],},{type: "dateRange",label: "订单时间2",key: "orderTime2",valueFormat: "yyyy-MM-dd",value: [],},{type: "datetime",label: "订单时间3",key: "orderTime3",valueFormat: "yyyy-MM-dd",value: "",},{type: "date",label: "订单时间4",key: "orderTime4",valueFormat: "yyyy-MM-dd",value: "",},{type: "checkBox",label: "",label: "订单时间4",options: [{key: "key1",label: "label1",value: true,span: 8,},{key: "key2",label: "label2",value: true,span: 8,},{key: "key3",label: "label3",value: "",span: 8,},],},{type: "radioGroup",label: "纯纯粹粹在场状态",key: "lotStatus",value: 0,options: [{value: 0,label: "全部",span: 8,},{value: 1,label: "在场",span: 8,},{value: 2,label: "离场",span: 8,},],},],tableHeight: 570,searchForm: {},tableData: [{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,},{date: "2016-05-04",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1517 弄",zip: 200333,},{date: "2016-05-01",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1519 弄",zip: 200333,},{date: "2016-05-03",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1516 弄",zip: 200333,},],treeData: [{id: 1,label: "一级 1",children: [{id: 4,label: "二级 1-1",children: [{id: 9,label: "三级 1-1-1",},{id: 10,label: "三级 1-1-2",},],},],},{id: 2,label: "一级 2",children: [{id: 5,label: "二级 2-1",},{id: 6,label: "二级 2-2",},],},{id: 3,label: "一级 3",children: [{id: 7,label: "二级 3-1",},{id: 8,label: "二级 3-2",},],},],defaultProps: {children: "children",label: "label",},currentPage: 4,tableLoading: false,};},watch: {filterText(val) {this.$refs.tree.filter(val);},},methods: {onReset(searchForm) {console.log("重置", searchForm);this.searchForm = searchForm;},onQuery(searchForm) {this.searchForm = searchForm;console.log("查询", searchForm);this.tableLoading = true;setTimeout(() => {this.tableLoading = false;}, 2000);},//table高度控制toggle(e) {this.tableHeight = e ? "520" : "570";},handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);},onSubmit() {console.log("submit!");},handleNodeClick(data) {console.log(data);},handleClick(row) {console.log(row);},//树节点筛选filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},},
};
</script>
<style></style>
AHMF容器组件:
<template><div class="container"><el-container><el-aside class="large-area" :width="asideWidth + 'px'" v-if="AShow"><div v-if="leftTitleShow"><div class="title">左标题</div><el-divider></el-divider></div><slot name="aside">左边内容</slot></el-aside><el-container class="large-area"><div v-if="rightTitleShow"><div class="title">右标题</div><el-divider></el-divider></div><el-header :height="headerHeight + 'px'"><slot name="header">头部</slot></el-header><el-main><slot name="main">主要部分</slot></el-main><el-footer :height="footerHeight + 'px'"><slot name="footer">底部</slot></el-footer></el-container></el-container></div>
</template>
<script>
export default {name: "AHMF",data() {return {};},props: {AShow: {type: Boolean,default: true,},asideWidth: {type: Number,default: 200,},headerHeight: {type: String,default: "auto",},footerHeight: {type: Number,default: 50,},leftTitleShow: {type: Boolean,default: true,},rightTitleShow: {type: Boolean,default: true,},},
};
</script>
<style>
.large-area {border: 1px solid #ebeef5; /* 浅色边框 */border-radius: 4px; /* 圆角 */background-color: #fff; /* 背景颜色 */box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
.container {margin: 0;padding: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.el-container {height: 100%;padding: 15px;
}.el-header,
.el-footer {color: #333;text-align: center;display: flex;justify-content: center;align-items: center;
}
.el-header {justify-content: flex-start;
}
.el-aside {color: #333;text-align: center;padding: 15px;margin-right: 10px;
}.el-main {color: #333;text-align: center;
}body > .el-container {margin-bottom: 40px;
}
.title {font-size: 16px;font-weight: bold;margin-bottom: 10px;text-align: left;
}
</style>
