优化

src/App.vue

@@ -56,4 +56,74 @@ defineOptions({
 }
 }
 
+/* 保证滚动条一直显示 */
+// .el-scrollbar__wrap {
+//   // overflow-x: scroll !important;
+//   // overflow-y: scroll !important;
+//   scrollbar-color: #c1c1c1 #f1f1f1 !important; /* 滑块和轨道颜色 */
+//   scrollbar-width: thin !important; /* 标准属性，Firefox支持 */
+// }
+
+/* 水平滚动条轨道 */
+.el-scrollbar__bar.is-horizontal {
+  height: 10px !important;
+  bottom: 2px !important;
+  background-color: #f1f1f1 !important;
+  border-radius: 4px !important;
+}
+
+/* 水平滚动条滑块 */
+.el-scrollbar__bar.is-horizontal > div {
+  height: 10px !important;
+  background-color: #c1c1c1 !important;
+  border-radius: 4px !important;
+  transition: background-color 0.2s !important;
+}
+
+/* 水平滚动条悬停效果 */
+.el-scrollbar__bar.is-horizontal > div:hover {
+  background-color: #110000 !important;
+}
+
+/* 垂直滚动条轨道 */
+.el-scrollbar__bar.is-vertical {
+  width: 10px !important;
+  right: 2px !important;
+  background-color: #f1f1f1 !important;
+  border-radius: 4px !important;
+}
+
+/* 垂直滚动条滑块 */
+.el-scrollbar__bar.is-vertical > div {
+  width: 10px !important;
+  background-color: #c1c1c1 !important;
+  border-radius: 4px !important;
+  transition: background-color 0.2s !important;
+}
+
+/* 垂直滚动条悬停效果 */
+.el-scrollbar__bar.is-vertical > div:hover {
+  background-color: #110000 !important;
+}
+// /* 保证水平滚动条一直显示 */
+// .el-scrollbar__wrap {
+//   overflow-x: scroll !important; /* 确保水平滚动条始终显示 */
+// }
+
+// /* 水平滚动条的样式 */
+// .el-scrollbar__bar.is-horizontal {
+//   height: 15px; /* 设置滚动条的高度 */
+//   background-color: #d3d3d3; /* 默认灰色背景 */
+// }
+
+// /* 保证垂直滚动条也始终显示 */
+// .el-scrollbar__wrap {
+//   overflow-y: scroll; /* 确保垂直滚动条始终显示 */
+// }
+
+// /* 垂直滚动条的样式 */
+// .el-scrollbar__bar.is-vertical {
+//   width: 20px; /* 设置滚动条的宽度 */
+//   background-color: #d3d3d3; /* 默认灰色背景 */
+// }
 </style>

src/view/material/bomproduct.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="padding: 0px;margin-left: -30px;">
       <layout>
         <!-- <layout-header>
           <div class="gva-table-box" style="margin-left: 20px;width: 97%;">
@@ -9,10 +9,9 @@
           </div>
         </layout-header> -->
   
-        <layout>
   
           <!-- 右侧区域 -->
-          <layout-content >
+          <layout-content>
           <el-main>
             <div class="gva-table-box">
               <!-- 表格数据 -->
@@ -26,18 +25,18 @@
                         @selection-change="handleSelectionChange">
                <el-table-column   align="center" label="工单编号" prop="BOM_工单编号"  width="100" />
                <el-table-column   align="center" label="物料编码" prop="BOM_物料编码"  width="100" />
-               <el-table-column   align="center" label="物料分类" prop="物料分类"  width="110" />
+               <el-table-column   align="center" label="物料分类" prop="物料分类"  width="73" />
                <el-table-column   align="center" label="物料名称" prop="BOM_物料名称"  width="160" />
-               <el-table-column   align="center" label="计划用料" prop="BOM_计划用量"  width="100" />
-               <el-table-column   align="center" label="计划门幅" prop="BOM_计划门幅"  width="100" />
-               <el-table-column   align="center" label="定额用料" prop="BOM_标准用量"  width="100" />
-               <el-table-column   align="center" label="定额门幅" prop="BOM_定额门幅"  width="100" />
+               <el-table-column   align="center" label="计划用料" prop="BOM_计划用量"  width="73" />
+               <el-table-column   align="center" label="计划门幅" prop="BOM_计划门幅"  width="73" />
+               <el-table-column   align="center" label="定额用料" prop="BOM_标准用量"  width="73" />
+               <el-table-column   align="center" label="定额门幅" prop="BOM_定额门幅"  width="73" />
                <!-- <el-table-column   align="center" label="实际门幅" prop="BOM_实际门幅"  width="110" /> -->
-               <el-table-column   align="center" label="实际用料" prop="BOM_实际用量"  width="100" />
+               <el-table-column   align="center" label="实际用料" prop="BOM_实际用量"  width="73" />
                <el-table-column   align="center" label="库存总量" prop="BOM_库存总量"  width="100" />
                <el-table-column   align="center" label="面料结余" prop="BOM_面料结余"  width="100" />
                <el-table-column   align="center" label="退还数量" prop="BOM_退还数量"  width="100" />
-               <el-table-column   align="center" label="投料单位" prop="BOM_投料单位"  width="100" />
+               <el-table-column   align="center" label="投料单位" prop="BOM_投料单位"  width="73" />
                <el-table-column   align="center" label="备注" prop="BOM_desc"  width="160" />
                <el-table-column   align="center" label="建档人员" prop="Sys_ID"  width="160" />
                <el-table-column   align="center" label="建档日期" prop="Sys_rq"  width="160" />
@@ -106,7 +105,6 @@
             
           </el-main>
         </layout-content>
-        </layout>
       </layout>
   
     </div>