leisure-core 0.5.21 → 0.5.22

package/le-list-form/src/main.vue

@@ -1,24 +1,27 @@
 <template>
-  <el-form :model="formPop" :rules="rules" ref="ruleForm" :label-width="labelWidth">
-    <el-form-item v-for="(item, index) in formColumns" :key="index" :label="item.label" :prop="item.prop"
-      class="leisure-form-item-class">
-      <div class="comContainerClass">
-        <component :is="componentType(item.type)" v-model="formPop[item.prop]"
-          v-bind="mergeProps(getComponentProps(item), item.attr || {})" v-on="item.event" class="compontClass">
-          <template v-if="item.type === 'radio'">
-            <el-radio v-for="(option, index) in item.options" :label="option.id" :key="index + '_radio'">{{ option.lable
-            }}</el-radio>
-          </template>
-          <template v-else-if="item.type === 'select'">
-            <le-select-option :options="fieldOptions[item.prop]" :label="item.kv.label" :value="item.kv.key"
-              :keyNum="item.keyNum" />
-          </template>
-        </component>
-        <slot :name="item.prop"></slot>
-      </div>
-    </el-form-item>
+  <el-form :model="formPop" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="le-form-container">
+    <div class="form-grid" :style="gridStyle">
+      <el-form-item v-for="(item, index) in formColumns" :key="index" :label="item.label" :prop="item.prop"
+        class="leisure-form-item-class">
+        <div class="comContainerClass">
+          <component :is="componentType(item.type)" v-model="formPop[item.prop]"
+            v-bind="mergeProps(getComponentProps(item), item.attr || {})" v-on="item.event" class="compontClass">
+            <template v-if="item.type === 'radio'">
+              <el-radio v-for="(option, index) in item.options" :label="option.id" :key="index + '_radio'">{{
+                option.lable
+              }}</el-radio>
+            </template>
+            <template v-else-if="item.type === 'select'">
+              <le-select-option :options="fieldOptions[item.prop]" :label="item.kv.label" :value="item.kv.key"
+                :keyNum="item.keyNum" />
+            </template>
+          </component>
+          <slot :name="item.prop"></slot>
+        </div>
+      </el-form-item>
+    </div>
     <slot></slot>
-    <el-form-item v-rfooter>
+    <el-form-item v-rfooter class="form-footer">
       <slot name="footerBtn"></slot>
       <le-button type="primary" @click="saveData" v-if="handleStatus == 1 || handleStatus == 2">保存</le-button>
       <le-button type="info" @click="close()">关闭</le-button>
@@ -46,6 +49,7 @@ export default {
       type: String,
       default: "100px",
     },
+
     fieldOptions: {
       type: Object,
       default: () => { },
@@ -54,6 +58,21 @@ export default {
       type: Number,
       default: 0, //0:详情 1:新增 2:编辑
     },
+    columnsPerRow: {
+      type: Number,
+      default: 1,
+      validator: (value) => value > 0 && value <= 4 // 限制最大4列，避免太拥挤
+    },
+    // 新增属性：列间距
+    columnGap: {
+      type: String,
+      default: "20px"
+    },
+    // 新增属性：行间距
+    rowGap: {
+      type: String,
+      default: "16px"
+    }
   },
   watch: {
     formData: {
@@ -105,7 +124,15 @@ export default {
       options: {}, //{field1:[{value:1,label:'选项1'},{value:2,label:'选项2'}]}
     };
   },
-  computed: {},
+  computed: {
+    gridStyle() {
+      return {
+        'grid-template-columns': `repeat(${this.columnsPerRow}, 1fr)`,
+        'column-gap': this.columnGap,
+        'row-gap': this.rowGap
+      };
+    }
+  },
   mounted() { },
   methods: {
     componentType(type) {
@@ -143,6 +170,23 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+le-form-container {
+  width: 100%;
+}
+
+.form-grid {
+  display: grid;
+
+  // 响应式处理：在小屏幕上自动调整为1列
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.leisure-form-item-class {
+  margin-bottom: 0; // 使用grid的gap控制间距，不需要margin-bottom
+}
+
 .leisure-form-item-class {}
 
 .comContainerClass {
@@ -154,4 +198,9 @@ export default {
     flex: 1
   }
 }
+
+.form-footer {
+  margin-top: 20px;
+  text-align: right;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.5.21",
+  "version": "0.5.22",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",