perf: 默认label宽度超出后省略+title提示

#235
fast-crud · Sep 12, 2023 · 3953dee · 3953dee
1 parent e7de092
commit 3953dee
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git a/packages/fast-admin/fs-admin-element b/packages/fast-admin/fs-admin-element
diff --git a/packages/fast-crud/src/components/actionbar/index.vue b/packages/fast-crud/src/components/actionbar/index.vue
@@ -70,7 +70,6 @@ export default defineComponent({
 </script>
 <style lang="less">
 .fs-actionbar {
-  min-width: 1px;
   .fs-button {
     margin: 0 2px;
   }

diff --git a/packages/fast-crud/src/components/crud/fs-form-item.vue b/packages/fast-crud/src/components/crud/fs-form-item.vue
@@ -9,10 +9,10 @@
     :rule-path="item.key"
   >
     <template #label>
-      <span v-if="computedLabelIsRender">
+      <span v-if="computedLabelIsRender" class="fs-form-item-label-text">
         <fs-render :render-func="computedLabelRender"></fs-render>
       </span>
-      <span v-else>
+      <span v-else class="fs-form-item-label-text" :title="computedLabel">
         {{ computedLabel }}
       </span>
 
@@ -173,6 +173,12 @@ export default defineComponent({
 .fs-form-item {
   .ant-form-item-label {
     line-height: 1;
+    .fs-form-item-label-text {
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
   }
   .el-form-item {
     .fs-form-item-label-icon {

diff --git a/packages/fast-crud/src/components/fs-crud.vue b/packages/fast-crud/src/components/fs-crud.vue
@@ -534,6 +534,7 @@ export default defineComponent({
       display: flex;
       flex: 1;
       align-items: center;
+      min-width: 1px;
     }
 
     .fs-crud-toolbar {

diff --git a/packages/fast-crud/src/use/default-crud-options.ts b/packages/fast-crud/src/use/default-crud-options.ts
@@ -45,6 +45,9 @@ export default {
         style: {
           "grid-template-columns": "50% 50%" // grid布局，默认两列
         },
+        row: {
+          gutter: 10
+        },
         col: { span: 12 },
         labelAlign: "right", // antdv
         labelCol: { span: 4 }, // antdv