大提交一版

src/views/AppKeyGoods.vue

@@ -7,21 +7,32 @@ export default {
       tableData: [],
       columns: [
         {label: "重点单品", prop: "goodsCategoryName"},
-        {label: "销售额", prop: "saleNum", width: "70px"},
-        {label: "库存数量", prop: "stockNum", width: "70px"},
-        {label: "销售目标", prop: "targetSaleNum", width: "70px"},
+        {label: "销售额", prop: "saleNum", width: 70},
+        {label: "库存数量", prop: "stockNum", width: 70},
+        {label: "销售目标", prop: "targetSaleNum", width:70},
         {label: "销售达成", prop: "saleAchieveRate"},
       ]
     }
   },
   computed: {
-    search: v => v.$marketBoard.search
+    search: v => v.$marketBoard.search,
+    tableConfig: v => {
+      return {
+        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        // headerBGC: '#003B51',
+        oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
+        header: v.columns.map(e => e.label),
+        columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
+        align: v.columns.map(e => e.align || "left"),
+        data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
+      }
+    },
   },
   methods: {
     getTableData() {
       const {$http, $waitFor} = window
       $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/marketKeyGoods", {
-        ...this.search, limit: 999
+        // ...this.search, limit: 999
       })).then(res => {
         if (res?.data) {
           this.tableData = res.data?.records || []
@@ -41,9 +52,7 @@ export default {
 
 <template>
   <section class="AppKeyGoods">
-    <el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px" stripe>
-      <table-column v-for="(column,i) in columns" :key="i" :column="column"/>
-    </el-table>
+    <dv-scroll-board :config="tableConfig" @click=""/>
   </section>
 </template>
 
@@ -52,65 +61,4 @@ export default {
   color: #fff;
   box-sizing: border-box;
 }
-
-.AppKeyGoods .tableHeader {
-  background: rgba(13, 48, 99, 0.6) !important;
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppKeyGoods .el-table tr {
-  background-color: transparent !important;
-}
-
-.AppKeyGoods .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppKeyGoods .el-table .el-table__footer-wrapper tr {
-  background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
-}
-
-.AppKeyGoods .el-table .el-table__footer-wrapper .is-leaf {
-  color: #66FFFF;
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppKeyGoods .el-table:before {
-  background: transparent;
-}
-
-.AppKeyGoods .tableCell {
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppKeyGoods .el-table tr.el-table__row--striped {
-  --odd-bg: #09265B;
-  background-color: #081F48;
-  background-image: linear-gradient(
-      -45deg, var(--odd-bg) 0, var(--odd-bg) 10%, transparent 10%, transparent 50%,
-      var(--odd-bg) 50%, var(--odd-bg) 60%, transparent 60%, transparent);
-  background-size: 10px 10px;
-}
-
-.AppKeyGoods .el-table tr.el-table__row--striped .tableCell {
-  background-color: transparent !important;
-}
-
-.AppKeyGoods .el-table tr:hover > .tableCell {
-  background-color: rgba(255, 255, 255, .1) !important;
-}
-
-.AppKeyGoods .subTitle {
-  line-height: 20px;
-  width: fit-content;
-  margin: 24px auto 12px;
-  background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
-  background-repeat: no-repeat;
-  background-size: 100% 2px;
-  background-position: center bottom;
-}
 </style>