人员管理

src/components/SearchForm/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="search-form-container">
-		<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" class="search-form-inline">
+		<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter">
 			<!-- 直接展示的表单项 -->
 			<slot :visible="true" :expanded="isExpanded"></slot>
 
@@ -154,8 +154,9 @@ defineExpose({
 
 <style lang="scss" scoped>
 .search-form-container {
-    
-	:deep(.search-form-inline) {
+	// 直接使用全局样式 el-form--inline，只需要覆盖特殊样式
+	
+	:deep(.el-form--inline) {
 		.collapse-trigger-item {
 			margin-left: 0;
 			margin-bottom: 0;
@@ -165,6 +166,18 @@ defineExpose({
 			padding: 0;
 			font-size: 14px;
 		}
+		
+		// 如果需要自定义宽度，可以覆盖全局样式（默认使用全局的 240px）
+		// 如果需要改为 200px，取消下面的注释
+		// .el-form-item {
+		// 	& > .el-input,
+		// 	.el-cascader,
+		// 	.el-select,
+		// 	.el-date-editor,
+		// 	.el-autocomplete {
+		// 		width: 200px;
+		// 	}
+		// }
 	}
 
 	// 可折叠内容区域 - 使用 contents 让包装器不影响布局