表单组件修改长度为一行4个

但是未解决原有在特定分辨率下串行的问题

ruoyi-admin-vue/src/components/Search/PageWrapperSearch.vue

@@ -23,15 +23,15 @@ export default {
     },
     sm: {
       type: Number,
-      default: 24
+      default: 12
     },
     md: {
       type: Number,
-      default: 12
+      default: 8
     },
     lg: {
       type: Number,
-      default: 8
+      default: 6
     },
     xl: {
       type: Number,
@@ -45,21 +45,20 @@ export default {
       ElFormRef: null,
       max: 0,
       isAdvanced: true,
-      isFold: true, // 默认折叠状态
+      isFold: true,
       labelWidthValue: '',
       inputEvents: [],
-      screenWidth: 1920
+      screenWidth: 1920,
+      visibleFormItemsCount: 0 // 新增：跟踪可见表单项数量
     }
   },
   computed: {
     gutter() {
       return (24 / this.max % 24) || 0
     },
-    // 计算每行最多能显示的列数
     maxItemsPerRow() {
       return Math.floor(24 / this.currentColWidth)
     },
-    // 获取当前屏幕尺寸对应的列宽
     currentColWidth() {
       if (this.screenWidth >= XL) return this.xl
       if (this.screenWidth >= LG) return this.lg
@@ -67,18 +66,47 @@ export default {
       if (this.screenWidth >= SM) return this.sm
       return this.xs
     },
-    // 是否显示折叠按钮
     shouldShowFoldButton() {
       const formItems = this.extractFormItems(this.$slots.default || [])
       return formItems.length > this.maxItemsPerRow - 1
     },
-    // 折叠状态下每行最多显示的表单项数量（包括按钮列）
     maxVisibleItemsWhenFold() {
-      return Math.max(1, this.maxItemsPerRow - 1) // 减去按钮列
+      return Math.max(1, this.maxItemsPerRow - 1)
+    },
+    // 修改：计算按钮列应该占用的实际列宽
+    buttonColWidth() {
+      if (this.shouldWrapButtons) {
+        return 24 // 按钮在单独一行时占满整行
+      }
+      
+      // 计算剩余空间，使按钮右对齐
+      const visibleCount = this.visibleFormItemsCount
+      const itemsInRow = this.maxItemsPerRow
+      
+      // 如果没有可见的表单项，按钮占整行
+      if (visibleCount === 0) return 24
+      
+      // 计算当前行已有的列数
+      const occupiedCols = visibleCount * this.currentColWidth
+      const remainingCols = 24 - occupiedCols
+      
+      // 如果剩余空间足够放下按钮列，使用剩余空间
+      if (remainingCols >= this.currentColWidth) {
+        return remainingCols
+      } else {
+        // 如果剩余空间不够，按钮换行并右对齐
+        return 24
+      }
     },
-    // 是否需要将按钮放在单独一行
+    // 修改：是否需要换行显示按钮
     shouldWrapButtons() {
-      return !this.isFold && this.shouldShowFoldButton
+      if (!this.isFold) {
+        // 展开状态下，如果可见表单项数量大于等于每行最大数量，按钮换行
+        return this.visibleFormItemsCount >= this.maxItemsPerRow
+      }
+      
+      // 折叠状态下，如果有需要隐藏的表单项，按钮和表单项在同一行
+      return false
     }
   },
   mounted() {
@@ -92,6 +120,7 @@ export default {
       this.observer.observe(this.ElFormRef.$el)
     }
     this.initSize()
+    this.updateVisibleCount()
     
     window.addEventListener('resize', this.handleResize)
   },
@@ -104,15 +133,16 @@ export default {
     }
     window.removeEventListener('resize', this.handleResize)
   },
+  updated() {
+    this.updateVisibleCount()
+  },
   methods: {
-    //  resetFields() {
-    //   if (this.ElFormRef && typeof this.ElFormRef.resetFields === 'function') {
-    //     this.ElFormRef.resetFields()
-    //   }
-    // },
     handleResize() {
       this.screenWidth = document.documentElement.clientWidth
       this.initSize()
+      this.$nextTick(() => {
+        this.updateVisibleCount()
+      })
     },
     initSize() {
       this.max = 24 / this.currentColWidth
@@ -134,13 +164,19 @@ export default {
       this.isFold = !this.isFold
       this.labelWidthValue = ''
       this.resetLabelWidth()
+      this.$nextTick(() => {
+        this.updateVisibleCount()
+      })
     },
-    // 判断是否应该隐藏表单项
     shouldHideItem(index) {
       if (!this.isFold) return false
       return index >= this.maxVisibleItemsWhenFold
     },
-    // 更可靠的 el-form-item 检测方法
+    // 新增：更新可见表单项数量
+    updateVisibleCount() {
+      const formItems = this.extractFormItems(this.$slots.default || [])
+      this.visibleFormItemsCount = formItems.filter((item, index) => !this.shouldHideItem(index)).length
+    },
     isFormItemNode(node) {
       if (!node) return false
       
@@ -163,7 +199,6 @@ export default {
       
       return false
     },
-    // 递归查找所有表单项
     extractFormItems(nodes, result = []) {
       if (!nodes || !Array.isArray(nodes)) return result
       
@@ -183,11 +218,12 @@ export default {
     }
   },
   render() {
-    // 提取所有 el-form-item
     const defaultSlots = this.$slots.default || []
     const formItems = this.extractFormItems(defaultSlots)
     
-    // 渲染表单项
+    // 更新可见数量
+    this.visibleFormItemsCount = formItems.filter((item, index) => !this.shouldHideItem(index)).length
+
     const formItemCols = formItems.map((item, index) => {
       const isHidden = this.shouldHideItem(index)
       
@@ -195,7 +231,7 @@ export default {
         <el-col
           class={{ 'hidden': isHidden }}
           key={`formitem-${index}`}
-          xs={24}
+          xs={this.xs}
           sm={this.sm}
           md={this.md}
           lg={this.lg}
@@ -206,7 +242,6 @@ export default {
       )
     })
 
-    // 渲染按钮
     const buttons = (
       <div class="buttons-space">
         <el-button
@@ -237,21 +272,23 @@ export default {
       </div>
     )
 
-    // 按钮列
     const buttonsCol = (
       <el-col
         class="ElColButtons"
         xs={24}
-        sm={this.sm}
-        md={this.md}
-        lg={this.lg}
-        xl={this.xl}
+        sm={this.buttonColWidth}
+        md={this.buttonColWidth}
+        lg={this.buttonColWidth}
+        xl={this.buttonColWidth}
         style={this.shouldWrapButtons ? 'margin-top: 18px;' : ''}
       >
         {this.$slots.buttons ? this.$slots.buttons : buttons}
       </el-col>
     )
 
+    // 计算按钮对齐方式
+    const buttonJustify = this.shouldWrapButtons ? 'flex-end' : 'flex-end'
+
     return (
       <el-form
         {...{ attrs: this.$attrs }}
@@ -260,16 +297,15 @@ export default {
         ref="ElFormRef"
         class="page-wrapper-search"
       >
-        {/* 第一行：表单项 */}
+        {/* 第一行：表单项和按钮（非换行情况） */}
         <el-row gutter={this.gutter}>
           {formItemCols}
-          {/* 折叠状态：按钮列与表单项在同一行 */}
           {!this.shouldWrapButtons && buttonsCol}
         </el-row>
         
-        {/* 展开状态：按钮列在第二行 */}
+        {/* 第二行：换行的按钮 */}
         {this.shouldWrapButtons && (
-          <el-row gutter={this.gutter} style="margin-top: 0;display: flex;justify-content: flex-end;">
+          <el-row gutter={this.gutter} style={`margin-top: 18px; display: flex; justify-content: ${buttonJustify};`}>
             {buttonsCol}
           </el-row>
         )}
@@ -284,7 +320,6 @@ export default {
   position: relative;
   background: white;
   padding: 16px;
-
 }
 
 :deep(.el-form-item) {
@@ -303,7 +338,7 @@ export default {
     .el-input,
     .el-select,
     .el-date-editor {
-      width: 100%;
+      width: 50%;
       
       .el-input__inner {
         border-radius: 4px;
@@ -385,6 +420,12 @@ export default {
     justify-content: flex-end;
     align-items: center;
     height: 40px;
+    
+    // 确保按钮内容右对齐
+    .buttons-space {
+      justify-content: flex-end;
+      width: 100%;
+    }
   }
 }