上次是最简单的一种，这次包含了有两个表单元素组成的搜索起始值和结束值的情况
搜索组件内代码
<template>
<div class="table-header">
<el-form :model="searchobj" inline>
<el-form-item v-for="item in config" :key="item.code" class="table-header-item" :style="'width:'+item.width">
<el-row v-if="item.range">
<el-col :span="11">
<el-select v-if="item.type==='select'" v-model="searchobj[item.code0]" :placeholder="item.title" :multiple="item.multiple?true:false" :filterable="item.filterable" collapse-tags clearable>
<el-option v-for="option in item.options" :key="item.value?option[item.value]:option.value" :label="item.label?option[item.label]:option.label" :value="item.value?option[item.value]:option.value"></el-option>
</el-select>
<el-date-picker
v-else-if="item.type==='date'"
v-model="searchobj[item.code0]"
:type="item.DateType||'date'"
:placeholder="item.title"
:clearable="item.clearable"
:value-format="item.valueFormat||'yyyy-MM-dd'"
:format="item.format||'yyyy-MM-dd'"
></el-date-picker>
<el-input v-else v-model="searchobj[item.code0]" :placeholder="item.title" :type="item.InputType||'text'" clearable @mousewheel.native.prevent></el-input>
</el-col>
<el-col :span="2" style="text-align:center">
<span>至</span>
</el-col>
<el-col :span="11">
<el-select v-if="item.type==='select'" v-model="searchobj[item.code1]" :placeholder="item.title" :multiple="item.multiple?true:false" :filterable="item.filterable" collapse-tags clearable>
<el-option v-for="option in item.options" :key="item.value?option[item.value]:option.value" :label="item.label?option[item.label]:option.label" :value="item.value?option[item.value]:option.value"></el-option>
</el-select>
<el-date-picker
v-else-if="item.type==='date'"
v-model="searchobj[item.code1]"
:type="item.DateType||'date'"
:placeholder="item.title"
:clearable="item.clearable"
:value-format="item.valueFormat||'yyyy-MM-dd'"
:format="item.format||'yyyy-MM-dd'"
></el-date-picker>
<el-input v-else v-model="searchobj[item.code1]" :placeholder="item.title" :type="item.InputType||'text'" clearable @mousewheel.native.prevent></el-input>
</el-col>
</el-row>
<el-row v-else>
<el-col :span="24">
<el-select v-if="item.type==='select'" v-model="searchobj[item.code]" :placeholder="`请选择${item.title}`" :multiple="item.multiple?true:false" :filterable="item.filterable" collapse-tags clearable>
<el-option v-for="option in item.options" :key="item.value?option[item.value]:option.value" :label="item.label?option[item.label]:option.label" :value="item.value?option[item.value]:option.value"></el-option>
</el-select>
<el-date-picker
v-else-if="item.type==='date'"
v-model="searchobj[item.code]"
:type="item.DateType||'date'"
:placeholder="`请选择${item.title}`"
:clearable="item.clearable"
:value-format="item.valueFormat||'yyyy-MM-dd'"
:format="item.format||'yyyy-MM-dd'"
></el-date-picker>
<el-cascader v-else-if="item.type=='cascader'" :placeholder="`请输入${item.title}`" v-model="searchobj[item.code]" :options="item.options" filterable clearable :props="item.props"></el-cascader>
<el-input v-else v-model="searchobj[item.code]" :placeholder="`请输入${item.title}`" :type="item.InputType||'text'" clearable @mousewheel.native.prevent></el-input>
</el-col>
</el-row>
</el-form-item>
<div class="table-header-button">
<el-button type="primary" @click="search" size="mini">搜 索</el-button>
<el-button v-show="showclear" @click="reset" type="text" size="mini">清 空</el-button>
</div>
</el-form>
</div>
</template>
<script>
export default {
props: {
config: { type: Array, default: [] },
searchobj: { type: Object, default: {}, required:true },
},
data() {
return {
_copy: {},
searchStatus: false,
};
},
created() {
this._copy = Object.assign({}, this.searchobj);
},
methods: {
// 查询
search() {
this.searchStatus = true;
this.$emit("search", this.searchobj);
setTimeout(() => {
this.searchStatus = false;
}, 600);
},
// 清空
reset() {
this.$emit("update:searchobj", Object.assign({}, this._copy));
this.search();
}
},
computed: {
showclear() {
let flag = false;
for (var item in this.searchobj) {
if (this.searchobj[item] !== this._copy[item]) {
flag = true;
}
}
return flag;
}
}
};
</script>
<style lang="less" scoped>
.table-header {
padding-top: 10px;
.table-header-button {
display: inline-block;
margin-bottom: 20px;
line-height: 30px;
}
.table-header-item {
width: 180px;
font-size: 12px;
margin-bottom: 20px;
margin-right: 16px;
/deep/.el-form-item__content {
width: 100%;
line-height: 30px;
.el-input {
width: 100%;
.el-input__inner {
padding: 5px 10px;
height: 30px;
line-height: 29px;
}
.el-input__icon {
line-height: 30px;
}
}
.el-input--prefix .el-input__inner {
padding-left: 30px;
}
.el-select {
width: 100%;
}
.el-cascader {
width: 100%;
line-height: 30px;
}
}
}
}
</style>
页面引入组件
import TableHeader from "@/components/TableHeader";
export default {
data () {
return {
tabHeader: tabHeader,
filterData: {
title: "",
pubDateStart: "",
pubDateEnd: "",
},
tableHeaderconfig: [
{ code: 'title', title: '新闻标题' },
{ code0:'pubDateStart',code1:'pubDateEnd',title:'发布时间',type:'date',range:true,width:'300px'},
],
};
},
components: { TableHeader },
methods: {
// 查询
getFilterList(val) {
console.log(val);
},
}
}
// 页面使用
<div class="search-box">
<table-header @search="getFilterList" :config="tableHeaderconfig" :searchobj.sync="filterData"></table-header>
</div>
<div class="table-box">
<el-table :data="tableData" :header-cell-style="tabHeader" style="width: 100%" >
<el-table-column prop="departmentName" label="部门名称"></el-table-column>
<el-table-column prop="resumeNoFirstDownload" label="查看次数"></el-table-column>
</el-table>
</div>
页面效果
表头搜索.jpg
