vue3+Element Plus功能组件封装——条件搜索（输入框（可新增删除），下拉选择框，日期选择）

目录

1.html部分

2.js部分

3.使用

4.附加

---

后台管理做多了，会发现无非就是一些，表单和表格，没什么新东西，直接套模板即可，下次遇到直接用，别再重复造轮子了，多花点时间推升自己！

1.html部分

选择性使用，可根据v-if else区分

<el-form ref="fromRef"  style="display:flex;">
	<template style="display:flex;flex-wrap:wrap;">
		<el-form-item v-for="item in FormData.formItems" :label="item.label">
			<!-- 判断是输入框还是选择框 选择框给出 是否多选属性  （附加表单验证） -->
			<el-input v-if="item.type=='input'" v-model="item.inputValue" :placeholder="item.placeholder"
				@change="inputChange(item.key,$event)" />
			<el-select v-else v-model="item.selectValue" :disabled="item.disabled" :multiple="item.multiple"
				:collapse-tags="item.collapsetags" :placeholder="item.placeholder"
				@change="selectChange(item.key,$event)" style="width: 200px;">
				<el-option v-for="option in item.selectOptions" :key="option.value" :label="option.label"
					:value="option.value" />
			</el-select>
            <template v-else-if="item.type=='multipleInput'">
				<template v-for="(time,index) in item.inputValue" :key="index">
					<div class="" style="width: 100%;">
						<el-input v-model="item.inputValue[index]" style="margin:0 5px 10px 0"
							@change="multipleInputChange(item.key,item.inputValue)"
							:placeholder="item.placeholder" />
						<el-icon v-if="index==0" style="font-size:20px" @click="addInput(item.key)">
							<CirclePlus />
						</el-icon>
						<el-icon v-else style="font-size:20px" @click="delInput(item.key,index)">
							<Remove />
						</el-icon>
					</div>
			
				</template>
			</template>
		</el-form-item>
		<!-- 判断有没有时间 -->
		<el-form-item :label="$t('CMP.time')" v-if="FormData.isTimePicker">
			<date-time-picker ref="childRef" @selectedDate="getSelectedDate"
				:toclear="false"></date-time-picker>
		</el-form-item>
	</template>
</el-form>

2.js部分

接收父组件数据，渲染页面；将搜索条件数据通过emit方法返回给父组件

import dateTimePicker from '@/components/dateTimePicker.vue'

let props = defineProps({
	FormData: Object
})

const emit = defineEmits()

const selectChange = (key, value) => {
	emit('selectFromChange', {
		key,
		value
	})
	console.log(key, value);
}
const inputChange = (key, value) => {
	emit('inputChange', {
		key,
		value
	})
	console.log(key, value);
}
const getSelectedDate = (date) => {
	emit('dateChange', date)
	console.log(date);
}
//输入框的新增和删除
    const multipleInputChange = (key, inputValue) => {
		emit('multipleInputChange', {
			key,
			inputValue
		})
		console.log(key, inputValue);
	}
	
	const addInput = (key) => {
		emit('addInput', key)
	}
	
	const delInput = (key, index) => {
		emit('delInput', {
			key,
			index
		})
	}

3.使用

<template>
	<div class="common_style">
		<select-module 
            :FormData="formData"
            @inputChange="inputChange" 
            @selectFromChange="selectFromChange"
            @dateChange="dateChange"
            @addInput="addInput"
            @multipleInputChange="multipleInputChange" 
            @delInput="delInput">
        </select-module>
	</div>
</template>
<script setup>
	import selectModule from '@/components/selectModule.vue'
	
	const inputChange = (data) => {
		searchFormData[data.key] = data.value
	}
	
	const selectFromChange = (data) => {
		searchFormData[data.key] = data.value
	}

    // 增加一个日期时间
	const addInput = (key) => {
		formData.formItems.map(item => {
			if (item.key == key) {
				item.inputValue.push('')
			}
		})
	}

    const delInput = (data) => {
		formData.formItems.map((item) => {
			if (item.key == data.key) {
				item.inputValue.splice(data.index, 1)
				updateInfo[data.key] = item.inputValue
			}
		})
		updateInfo[data.key] = updateInfo[data.key].filter(item => item)
	}

    const multipleInputChange = (data) => {
		data.inputValue = data.inputValue.filter(item => item)
		updateInfo[data.key] = data.inputValue
	}
	
    let updateInfo = {}//用于接收子组件数据

	const formData = reactive({
		formItems: [{
				type: 'input',
				key: 'ID',
				inputValue: "",
				label: i18n.global.t('DQ.deviceID'),
				placeholder: i18n.global.t('DQ.pleaseInputID')
			},
			{
				type: 'select',
				key: 'Type',
				selectValue: "",
				label: i18n.global.t('DQ.Type'),
				multiple: true,
				collapsetags: true,
				placeholder: i18n.global.t('DQ.pleaseSelectType'),
				selectOptions
			}，
            {
				type: 'multipleInput',
				key: 'phones',
				inputValue: [],
				label: i18n.global.t('DM.phoneNumbers'),
				placeholder: i18n.global.t('DM.phoneNumbersPlaceholder')
			},
		]
		isTimePicker: true
	})
</script>

其中，multiple: true 和 collapsetags: true用于选择框的多选配置

输入框可以选择性的增加或删减，应用场景可能是输入多个邮箱或者电话号码，通过加减号动态的控制输入框的数量，取值时通过filter函数去除重复部分

4.附加

上述时间日期选择组件为额外封装

可实现限制时间范围，时间格式转换，快速选择范围内时间

封装代码如下：

<template>
	<div class="">
		<el-date-picker style="color: #809AAB;" :shortcuts="shortcuts" v-model="curentTime" type="datetimerange"
			 :start-placeholder="$t('CMP.startTime')" 
			 :disabled-date="disabledDate" :end-placeholder="$t('CMP.endTime')" @change="sureDate" />
	</div>
</template>


<script setup>
	import {
		ref
	} from 'vue'
	const emit = defineEmits()
	let props = defineProps({
		defaultTimeValue: Array
	})
	//如果要设置默认时间使用 此处的v-model值
	const curentTime = ref(props.defaultTimeValue)


	const sureDate = (e) => {
		if (e) {
			console.log(formatDate(e[0]), formatDate(e[1]));
			curentTime.value = [formatDate(e[0]), formatDate(e[1])]
		} else {
			curentTime.value = []
		}
		//将选中的值传递给父组件
		emit('selectedDate', curentTime.value)
	}

	const clearDate = () => {
		curentTime.value = []
	}
	//获取前一个月的今天
	const getPrevMonthSameDay = (num) => {
		const now = new Date();
		const prevMonth = new Date(now.getFullYear(), now.getMonth() - num, 1);
		const daysInPrevMonth = new Date(prevMonth.getFullYear(), prevMonth.getMonth() + 1, 0).getDate();
		const sameDayInPrevMonth = Math.min(now.getDate(), daysInPrevMonth);
		return new Date(prevMonth.getFullYear(), prevMonth.getMonth(), sameDayInPrevMonth);
	};

	// 创建日期限制函数
	const disabledDate = (time) => {
		return time < getPrevMonthSameDay(2) || time > new Date();
	};

	const shortcuts = [{
			text: 'Last week',
			value: () => {
				const end = new Date()
				const start = new Date()
				start.setDate(start.getDate() - 7)
				return [start, end]
			},
		},
		{
			text: 'Last month',
			value: () => {
				const end = new Date()
				const start = new Date()
				start.setMonth(start.getMonth() - 1)
				return [start, end]
			},
		},
		{
			text: 'Last 3 months',
			value: () => {
				const end = new Date()
				const start = new Date()
				start.setMonth(start.getMonth() - 3)
				return [start, end]
			},
		},
	]
	
	//将标准时间格式转为类似于 202408051104 格式
	const formatDate = (date) => {
		var year = date.getFullYear();
		var month = ("0" + (date.getMonth() + 1)).slice(-2); // getMonth返回的是0-11，所以需要+1
		var day = ("0" + date.getDate()).slice(-2);
		var hours = ("0" + date.getHours()).slice(-2);
		var minutes = ("0" + date.getMinutes()).slice(-2);
		var seconds = ("0" + date.getSeconds()).slice(-2);
		return `${year}${month}${day}${hours}${minutes}${seconds}`;
	}

	defineExpose({
		clearDate
	})
</script>



<style scoped>
	:deep(.el-date-editor .el-range-input) {
		color: #fff;
	}
</style>