BOM新增规格和型号的显示

src/views/material/BOMmanage/components/baseInfo.vue

@@ -19,13 +19,18 @@
 
       <el-row>
         <el-col :span="5" label-width="78px">
-          <el-form-item label="BOM编码:" prop="type">
-            {{ dataInfo.code }}
+          <el-form-item label="BOM编码:" prop="type" :title="dataInfo.code">
+            <div class="ellipsis">{{ dataInfo.code }}</div>
           </el-form-item>
         </el-col>
         <el-col :span="5" label-width="78px">
-          <el-form-item label="BOM名称:" prop="type">
-            {{ dataInfo.name }}
+          <el-form-item
+            label="BOM名称:"
+            prop="type"
+            :title="dataInfo.name"
+            class="ellipsis"
+          >
+            <div class="ellipsis">{{ dataInfo.name }}</div>
           </el-form-item>
         </el-col>
         <el-col :span="4" label-width="78px">
@@ -40,7 +45,7 @@
           <el-form-item label="审批状态:" prop="type">
             <el-select
               size="mini"
-              style="width: 120px"
+              style="width: 100px"
               disabled
               v-model="dataInfo.approvalStatus"
               placeholder="请选择"
@@ -69,6 +74,22 @@
             编辑</el-button
           >
         </el-col>
+
+        <el-col :span="5" label-width="78px">
+          <el-form-item label="型号:" prop="type" :title="dataInfo.modelType">
+            <div class="ellipsis">{{ dataInfo.modelType }}</div>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="5" label-width="78px">
+          <el-form-item
+            label="规格:"
+            prop="type"
+            :title="dataInfo.specification"
+          >
+            <div class="ellipsis">{{ dataInfo.specification }}</div>
+          </el-form-item>
+        </el-col>
       </el-row>
 
       <el-button
@@ -182,4 +203,12 @@
   .el-form-item {
     margin-bottom: 2px;
   }
+
+  .ellipsis {
+    width: 100x;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 显示省略号 */
+    vertical-align: middle; /* 让它和其他元素对齐，看起来更好 */
+  }
 </style>