vue2动态查询条件

停留的章小鱼

已于 2023-06-07 09:39:56 修改

阅读量953

点赞数

文章标签：前端 vue 前端框架

于 2023-06-07 09:34:43 首次发布

本文链接：https://blog.csdn.net/2201_75870706/article/details/131080545

版权

效果图：

全选：

手动勾选：

清空：

上代码：

首先公共样式在App.vue中：

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.row{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.center{
	align-items: center;
	justify-content: center;
}
.space-between{
	justify-content: space-between;
}
.space-around{
	justify-content: space-around;
}
.flex-end{
	justify-content: flex-end;
}
.column{
	display: flex;
	flex-direction: column;
}
.wraps{
	flex-wrap: wrap;
}
.flex1{
	flex:1;
}
.flex2{
	flex:2;
}
.flex3{
	flex:3;
}

在vue2项目下新建页面dynmicQuery.vue文件:

<template>
	<div>
		<div class="column" style="min-height: 750px;">
			<div style="margin: 12px 0;">动态查询</div>
			<template>
				<filter-criteria :Object='ObjectList' @setQuery='query'></filter-criteria>
			</template>
			<template>
				<div class="row">
					<div v-for="(item,index) in datalist" :key="index" style="margin: 12px;">
						{{item.name}} ：{{item.modelValue}}
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	import filterCriteria from '@/views/components/filterCriteria';
	export default {
		components:{
			filterCriteria
		},
		data() {
			return {
				ObjectList: [{
					name: '所属疗区', //左边名字
					type: 'selects', //类型：下拉选框 单选select 多选selects，输入框input，按钮button
					modelValue: [], //单选''多选[],输入框''
					placeholder: '请选择所属疗区', //提示文字
					default:true,//是否默认显示----用于筛选
					disabled:true,//是否必须选择的
					label: 'label', //对应select的optionList下的 key---> label
					value: 'value', //对应select的optionList下的 key---> value
					optionList: [{ //select的下拉框数据
						value: '选项1',//key---> value
						label: '疗养一区',//key---> label
						disabled: false//是否禁用选择
					}, {
						value: '选项2',
						label: '疗养二区',
						disabled: false
					}, {
						value: '选项5',
						label: '疗养三区',
						disabled: true,
					}]
				}, {
					name: '编号',
					type: 'input',
					modelValue: '',
					placeholder: '请输入编号',
					default:true,
					disabled:false,
					label: '',
					value: '',
					optionList: []
				}, {
					name: '姓名',
					type: 'input',
					modelValue: '',
					placeholder: '请输入姓名',
					default:true,
					disabled:false,
					label: '',
					value: '',
					optionList: []
				}, {
					name: '是否本单位',
					type: 'select',
					modelValue: '',
					placeholder: '请选择是否本单位',
					default:false,
					label: 'label',
					value: 'value',
					optionList: [{
						value: '1',
						label: '是',
						disabled: false
					}, {
						value: '2',
						label: '否',
						disabled: false
					}]
				}, {
					name: '联系方式',
					type: 'input',
					modelValue: '',
					placeholder: '请输入联系方式',
					default:false,
					disabled:false,
					label: '',
					value: '',
					optionList: []
				}, {
					name: '家属姓名',
					type: 'input',
					modelValue: '',
					placeholder: '请输入家属姓名',
					default:false,
					disabled:false,
					label: '',
					value: '',
					optionList: []
				}, {
					name: '在职状态',
					type: 'select',
					modelValue: '',
					placeholder: '请选择在职状态',
					default:false,
					label: 'label',
					value: 'value',
					optionList: [{
						value: '1',
						label: '在职',
						disabled: false
					}, {
						value: '2',
						label: '离职',
						disabled: false
					}, {
						value: '3',
						label: '待定',
						disabled: false
					}]
				},{
					name: '',
					type: 'button',
					modelValue: null,
					placeholder: null,
					default:false,
					disabled:false,
					label: '',
					value: '',
					optionList: [],
					buttonList:[
						{
							buttonName:'查询',
							clickName:'query',
							type:'primary',//''默认按钮,primary主要按钮,success成功按钮,info信息按钮,warning警告按钮,danger危险按钮
							noRegular:false,//是筛选按钮
						},
						{
							buttonName:'重置',
							clickName:'resetting',
							type:'danger',
							noRegular:false,
						},
						{
							buttonName:'+ 筛 选',
							type:'primary',
							noRegular:true,
						}
					]
				}, ],
				datalist:[],
			}
		},
		methods: {
			query(e) { //查询
				this.datalist = [...e]
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>

本案例在/views/components下新建filterCriteria.vue文件和screenBtn.vue文件:

！！！filterCriteria.vue文件代码：

<template>
	<div class="header row wraps">
		<div class="row box_ul" v-for="(item,index) in ObjectList" :key="index"
			v-if="checkboxGroupList.includes(item.name) || item.type.includes('button')">
			<div class="title" v-if="item.name&& !item.type.includes('button')">
				{{item.name}}
			</div>
			<template v-if="item.type.includes('select')">
				<el-select v-model="item.modelValue" :multiple='item.type === "selects"' :placeholder="item.placeholder"
					size="mini" class="input" clearable collapse-tags>
					<el-option v-for="(date,idx) in item.optionList" :key="idx" :label="date[item.label]"
						:value="date[item.value]" :disabled="!!date.disabled"></el-option>
				</el-select>
			</template>
			<template v-if="item.type.includes('input')">
				<el-input v-model="item.modelValue" size="mini" :placeholder="item.placeholder" class="input"></el-input>
			</template>
			<template v-if="item.type.includes('button')">
				<div v-for="(date,idx) in item.buttonList" :key="idx" style="margin-right: 12px;">
					<template v-if="!date.noRegular">
						<el-button :type="date.type" size="mini" @click="query"
							v-if="date.clickName === 'query'">{{date.buttonName}}</el-button>
						<el-button :type="date.type" size="mini" @click="resetting"
							v-if="date.clickName === 'resetting'">{{date.buttonName}}</el-button>
					</template>
					<template v-else>
						<screen-btn :defaultList='defaultList' :allList='allList' :Inevitable='Inevitable'
							@change="changeScreenBtn">
						</screen-btn>
					</template>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	import screenBtn from '@/views/components/screenBtn';
	export default {
		components: {
			screenBtn
		},
		props: ['Object'],
		data() {
			return {
				ObjectList: JSON.parse(JSON.stringify(this.Object)),
				defaultList: [], //默认的
				Inevitable: [], //必须选择的
				allList: [], //全部的
				checkboxGroupList: [], //选择的
			}
		},
		created() {
			console.log(this.Object);
			this.Object.forEach(date => {
				if (date.name) {
					this.allList.push(date.name)
					if (date.default) {
						this.defaultList.push(date.name)
						this.checkboxGroupList.push(date.name)
						if (date.disabled) {
							this.Inevitable.push(date.name)
						}
					}
				}
			}) //默认的
		},
		methods: {
			query() { //查询
				let arr = []
				this.ObjectList.forEach(date => {
					if(date.type != 'button'){
						arr.push({
							name:date.name,
							modelValue:date.modelValue
						})
					}
				})
				this.$emit('setQuery',arr)
			},
			resetting() { //重置
				this.ObjectList = JSON.parse(JSON.stringify(this.Object))
			},
			changeScreenBtn(item) { //筛选查询条件
				this.checkboxGroupList = item
				this.resetting()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		.box_ul {
			width: 23.333%;
			margin: 0 12px 12px 0;

			.title {
				margin-right: 12px;
				min-width: 70px;
				text-align: right;
			}

			.input {
				width: 260px;
			}
		}
	}
</style>

！！！screenBtn.vue文件代码：

<template>
	<div>
		<el-popover
			placement="bottom"
			trigger="hover"
			v-model="popoverValue">
			<div class="column">
				<div class="row">
					<el-button type="text" size="small" @click="operateBtn('all')">全选</el-button>
					<div style="width: 1px; height: 14px; background: #409eff;margin: 0 10px;"></div>
					<el-button type="text" size="small" @click="operateBtn('empty')">清空</el-button>
					<div style="width: 1px; height: 14px; background: #409eff;margin: 0 10px;"></div>
					<el-button type="text" size="small" @click="operateBtn('default')">默认</el-button>
				</div>
				<el-checkbox-group v-model="checkboxGroupList" size='mini' @change='changeGroup'>
					<div class="row checkboxli" v-for="item in checkboxList" :key="item">
						<el-checkbox :label="item" :disabled='checkboxInevitable.includes(item)'>{{item}}</el-checkbox>
					</div>
				</el-checkbox-group>
			</div>
			<el-button slot="reference" type="primary" size="mini">+ 筛 选</el-button>
		</el-popover>
	</div>
</template>

<script>
	export default {
		props:{
			defaultList:{
				type:Array,
				required: true,
				default:()=>[]
			},
			allList:{
				type:Array,
				required: true,
				default:()=>[]
			},
			Inevitable:{
				type:Array,
				required: true,
				default:()=>[]
			}
		},
		data() {
			return {
				popoverValue:false,
				checkboxGroupList:this.defaultList,//选择的
				checkboxList:this.allList,//全部数据
				checkboxInevitable:this.Inevitable,//必选的
			}
		},
		methods:{
			operateBtn(type){//全选
				if(type == 'all'){
					this.checkboxGroupList = this.allList
				}else if(type == 'empty'){
					this.checkboxGroupList = [...this.checkboxInevitable]
				}else{
					this.checkboxGroupList = this.defaultList
				}
				this.changeGroup()
			},
			changeGroup(){//；筛选多选框
				this.popoverValue = false
				this.$emit('change',this.checkboxGroupList)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.checkboxli{
		margin: 10px 0;
	}
	::v-deep .el-checkbox{
		margin-right: 0;
	}
	::v-deep .el-checkbox__label{
		padding-left: 15px;
	}
</style>