VUE前端页面头部header查询条件框_el-header

<el-container class="train-plan-index">
		<el-header>
			<el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
				<el-form-item label="培训项目" prop="planId">
					<el-select v-model="form.planId" clearable filterable placeholder="请选择培训项目">
						<el-option v-for="item in projectList" :key="item.uuid" :label="item.project" :value="item.uuid"></el-option>
					</el-select>
				</el-form-item>
 
				<el-form-item label="姓名" prop="name" v-show="nameShow">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
 
				<el-form-item label="培训时间" prop="checkTime" width="200">
					<el-date-picker
						v-model="form.checkTime"
						type="daterange"
						align="right"
						unlink-panels
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="this.$common.pickerOptions"
						:clearable="false"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">查询</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>
		</el-header>
</el-container>