Browse Source

fix: BsUi-描述列表逻辑修改

lirenjie 4 months ago
parent
commit
54f0850bed
1 changed files with 22 additions and 6 deletions
  1. 22 6
      src/components/BsUi/Descriptions/index.vue

+ 22 - 6
src/components/BsUi/Descriptions/index.vue

@@ -13,7 +13,7 @@
         <slot></slot>
       </div>
       <a-descriptions v-if="!isEmpty(items)" :bordered="false" v-bind="extraProps">
-        <a-descriptions-item v-for="(item, index) in items.filter(v => !v.visible)" :key="index" v-bind="item.extraProps" >
+        <a-descriptions-item v-bind="item.extraProps" v-for="(item, index) in items.filter((v) => !v.visible)" :key="index" :class="calculateClass(item)">
           <template #label>
             <slot v-if="item.labelSlot" :name="item.labelSlot" :label="item.label" :value="item.value"></slot>
 
@@ -81,7 +81,14 @@
   const emits = defineEmits(['update:isFolded']);
 
   const slots = useSlots();
-
+  const calculateClass = (item) => {
+    if (item.directionColumn) {
+      return 'flex-direction-column';
+    }
+    if (item.noLabelMark) {
+      return 'no-label-after';
+    }
+  };
   const handleClkHeader = () => {
     foldState.value = !foldState.value;
   };
@@ -152,10 +159,19 @@
     .default_slot {
       padding: 10px 0;
     }
-    .value_slot {
-      position: absolute;
-      bottom: 0;
-      transform: translateY(100%);
+
+    :deep(.flex-direction-column .ant-descriptions-item-container) {
+      flex-direction: column !important;
+    }
+
+    :deep(.no-label-after .ant-descriptions-item-label::after) {
+      content: '';
     }
+
+    // .value_slot {
+    //   position: absolute;
+    //   bottom: 0;
+    //   transform: translateY(100%);
+    // }
   }
 </style>