自定义时间选择、多选下拉组件

src/components/scMultipleSelect/index.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Descripttion: 多选框组件
+ * @Author: 龙运模
+ * @Date: 2024年07月11日
+ * @LastEditors: 龙运模
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="scSelect">
+		<el-select v-bind="$attrs" v-model="localData" class="input" :size="size" @visible-change="getDataList" @change="selectChange" :placeholder="placeholder" clearable>
+			<slot></slot>
+		</el-select>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "index",
+	props:{
+		select_params: {
+			type: Object,
+			default: () => ({ operator: "in", value: [] })
+		},
+		size:{ type: String, default: "small" },
+		placeholder:{type:String, default:"请选择"},
+	},
+	watch:{
+		select_params:{
+			handler(val){
+				if(!val || val.value.length == 0){
+					this.localData = [];
+				}
+			},
+			deep:true
+		}
+	},
+	data(){
+		return{
+			localData:[],
+		}
+	},
+	mounted() {
+
+	},
+	methods:{
+		getDataList(val){
+			this.$emit('fetchData',val);
+		},
+		selectChange(e){
+			this.localData = e;
+			this.emitActivationSelect();
+		},
+		emitActivationSelect() {
+			this.$emit('update:select_params', {
+				operator: this.select_params.operator,
+				value: this.localData? this.localData:[]
+			});
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.scSelect{
+	width: 100%;
+	height: 100%;
+	 :deep(.el-input){
+		 height: 28px;
+	 }
+}
+</style>