效果图

代码块

<template><div><!-- 1.产品搜索 --><div class="header"><div class="from"><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人"></el-input></el-form-item><el-form-item label="查询时间"><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1"></el-date-picker></el-form-item></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form></div><div class="group"></div></div><!-- 2.产品列表 --><div class="content">222</div></div>
</template><script>
export default {data() {return {formInline: {user: '',date1:''}}},methods: {onSubmit() {console.log('submit!',this.formInline);}}
}
</script><style lang="less" scoped>
.header{background-color: #fff;margin-bottom: 20px;padding: 10px;
}
.content{background-color: #fff;
}
</style>

注意的地方：我把输入框和日期都放到formInline对象里边了；查询用了一个点击事件 直接获取这两个事件