库存预警页面颜色显示

src/components/Table/src/Table.vue

@@ -53,6 +53,7 @@ export default defineComponent({
       type: Array as PropType<Recordable[]>,
       default: () => []
     },
+    stripe: propTypes.bool.def(true),
     searchTableSelectionsList:[],//回显列表
   },
   emits: ['update:pageSize', 'update:currentPage', 'register', 'update:sort'],
@@ -307,7 +308,7 @@ export default defineComponent({
           onSelection-change={selectionChange}
           onSort-change={sortChange}
           {...unref(getBindValue)}
-          stripe 
+          stripe={unref(getProps).stripe}
         >
           {{
             default: () => rnderTableColumn(),

src/views/eam/report/itemWarning/index.vue

@@ -10,7 +10,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <Table :columns="tableColumns" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="{
+    <Table :columns="tableColumns"  :stripe="false" :row-style="tableRowClassName" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="{
         total: tableObject.total
       }" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage"
       v-model:sort="tableObject.sort">
@@ -254,6 +254,22 @@
     templateTitle: '物料导入模版.xlsx'
   })
 
+    function  tableRowClassName({row, rowIndex}) {
+      console.log(row.classification);
+        if (row.classification =='A') {
+          return {
+            background: 'red !important'
+          };
+        } 
+        if (row.classification =='B') {
+          return {
+            background: 'yellow !important'
+          };
+        }
+        return '';
+      }
+
+  
   // 导入成功之后
   const importSuccess = () => {
     getList()
@@ -274,9 +290,31 @@
   })
 </script>
 <style lang="scss" scoped>
-  ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell{
+//   ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell{
-    transition: background-color .25s ease !important; 
+//     transition: background-color .25s ease !important; 
+//     background: red !important;
+//     color: white !important;
+// }
+  ::v-deep .el-table .red-row {
     background: red !important;
-    color: white !important;
+  }
-}
+
+  ::v-deep .el-table .yellow-row {
+    background: yellow !important;
+  }
+
+  ::v-deep .el-table tr > red-row{
+    background: red !important;
+  }
+
+//   ::v-deep .el-table .red-row {
+//   --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
+// }
+// ::v-deep .el-table .yellow-row {
+//   --el-table-tr-bg-color: var(--el-color-success-light-9) !important;
+// }
+
+  // ::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell .yellow-row {
+  //   background: yellow !important;
+  // }
 </style>

src/views/eam/report/itemWarning/itemWarning.data.ts

@@ -27,7 +27,6 @@ export const Item = useCrudSchemas(reactive<CrudSchema[]>([
     isSearch: true,
     table: {
       width: 180,
-      fixed: 'left'
     },
   },
   {
@@ -187,13 +186,12 @@ export const Item = useCrudSchemas(reactive<CrudSchema[]>([
       width: 180
     },
   },
-  {
+  // {
-    label: '操作',
+  //   label: '操作',
-    field: 'action',
+  //   field: 'action',
-    isForm: false,
+  //   isForm: false,
-    table: {
+  //   table: {
-      width: 150,
+  //     width: 150,
-      fixed: 'right'
+  //   }
-    }
+  // }
-  }
 ]))