vue+element动态搜索条件

html代码

<el-card class="box-card">
			<el-form label-width='0.5rem' class='fromclass'>
					<el-form-item :label="item.name" v-for="item in searchlist" :key='item.code' v-if="item.type=='input'" style='float: left;'>
							<el-input style='width:1rem' v-model="item.prop" clearable></el-input>
					</el-form-item>
					<el-form-item :label="item.name" v-for="item in searchlist" :key='item.code' v-if="item.type=='time'" style='float: left;'>
						<el-date-picker
						     v-model="valuetime"
						     type="datetimerange"
							 value-format="yyyy-MM-dd hh:mm:ss"
						     range-separator="至"
						     start-placeholder="开始日期"
						     end-placeholder="结束日期">
						   </el-date-picker>
					</el-form-item>
					<el-form-item style='float: left;' label-width='0.1rem'>
						<el-button type="success" icon="el-icon-search" @click='query'>查询</el-button>
					</el-form-item>
			</el-form>
		</el-card>

export default {
		name: "timedtasks",
		data() {
			return {
			searchlist:[{name:'时间范围',prop:"name",code:1,type:'time'},{name:'年龄',prop:"",code:2,type:'input'},
				{name:'年龄',prop:"",code:3,type:'input'},{name:'年龄',prop:"",code:4,type:'input'},
				{name:'年龄',prop:"",code:5,type:'input'},{name:'年龄',prop:"",code:6,type:'input'},],//全部搜索框
			}
		},
	}

备注

searchist里的数据现在是固定值，可从后台获取进行替换。

根据设置的时间选择器跟普通输入框的标识 type，在页面上进行绑定