尔泓产品分析

src/views/dataBoard/main/productAnalysis.vue

@@ -24,7 +24,7 @@
           </el-table-column> -->
         </el-table-column>
         <el-table-column label="订单" align="center">
-          <el-table-column label="成单次数" prop="orderCount" width="120">
+          <el-table-column label="成单次数" prop="orderCount" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.orderCount ,2) }}</div>
             </template>
@@ -32,27 +32,27 @@
 
         </el-table-column>
         <el-table-column label="销售" align="center">
-          <el-table-column label="总销量" prop="saleQuantity" width="120">
+          <el-table-column label="总销量" prop="saleQuantity" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.saleQuantity ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="总销售额￥" prop="saleAmount" width="120">
+          <el-table-column label="总销售额￥" prop="saleAmount" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.saleAmount ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="平均单价￥" prop="saleAveragePrice" width="120">
+          <el-table-column label="平均单价￥" prop="saleAveragePrice" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.saleAveragePrice ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="最低单价￥" prop="saleMinPrice" width="120">
+          <el-table-column label="最低单价￥" prop="saleMinPrice" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.saleMinPrice ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="最高单价￥" prop="saleMaxPrice" width="120">
+          <el-table-column label="最高单价￥" prop="saleMaxPrice" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.saleMaxPrice ,2) }}</div>
             </template>
@@ -60,27 +60,27 @@
         </el-table-column>
 
         <el-table-column label="采购" align="center">
-          <el-table-column label="总采购量" prop="purchasesQuantity" width="120">
+          <el-table-column label="总采购量" prop="purchasesQuantity" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.purchasesQuantity ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="总采购额￥" prop="purchasesAmount" width="120">
+          <el-table-column label="总采购额￥" prop="purchasesAmount" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.purchasesAmount ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="平均单价￥" prop="purchasesAveragePrice" width="120">
+          <el-table-column label="平均单价￥" prop="purchasesAveragePrice" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.purchasesAveragePrice ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="最低单价￥" prop="purchasesMinPrice" width="120">
+          <el-table-column label="最低单价￥" prop="purchasesMinPrice" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.purchasesMinPrice ,2) }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="最高单价￥" prop="purchasesMaxPrice" width="120">
+          <el-table-column label="最高单价￥" prop="purchasesMaxPrice" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.purchasesMaxPrice ,2) }}</div>
             </template>
@@ -88,7 +88,7 @@
         </el-table-column>
 
         <el-table-column label="利润" align="center">
-          <el-table-column label="总利润" prop="grossProfit" width="120">
+          <el-table-column label="总利润" prop="grossProfit" width="120" sortable>
             <template #default="{ row }">
               <div> {{ moneyFormat(row.grossProfit ,2) }}</div>
             </template>
@@ -167,58 +167,119 @@ const handlePageChange = (val) => {
   margin: 20px;
 }
 
-:deep(.el-table thead.is-group th.el-table__cell) {
+::v-deep(.el-table thead.is-group th.el-table__cell) {
   // border: 1px solid #c2c5cb;
 }
-:deep(
-    .el-table .el-table__header-wrapper th,
+::v-deep(
+    .el-table .el-table__header-wrapper .el-table__header th,
     .el-table .el-table__fixed-header-wrapper th
   ) {
   background-color: #f5f7fa !important;
 }
 
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_6_column_7) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_6_column_7
+  ) {
   background-color: #f59a23 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_6) {
+::v-deep(
+    .el-table .el-table__header-wrapper .el-table__header .el-table_2_column_6
+  ) {
   background-color: #f59a23 !important;
 }
 //
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_9) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_8_column_9
+  ) {
   background-color: #02a7f0 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_10) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_8_column_10
+  ) {
   background-color: #02a7f0 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_11) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_8_column_11
+  ) {
   background-color: #02a7f0 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_12) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_8_column_12
+  ) {
   background-color: #02a7f0 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_8_column_13) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_8_column_13
+  ) {
   background-color: #02a7f0 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_8) {
+::v-deep(
+    .el-table .el-table__header-wrapper .el-table__header .el-table_2_column_8
+  ) {
   background-color: #02a7f0 !important;
 }
 //
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_15) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_14_column_15
+  ) {
   background-color: #70b603 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_16) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_14_column_16
+  ) {
   background-color: #70b603 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_17) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_14_column_17
+  ) {
   background-color: #70b603 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_18) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_14_column_18
+  ) {
   background-color: #70b603 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_14_column_19) {
+::v-deep(
+    .el-table
+      .el-table__header-wrapper
+      .el-table__header
+      .el-table_2_column_14_column_19
+  ) {
   background-color: #70b603 !important;
 }
-:deep(.el-table .el-table__header-wrapper .el-table_2_column_14) {
+::v-deep(
+    .el-table .el-table__header-wrapper .el-table__header .el-table_2_column_14
+  ) {
   background-color: #70b603 !important;
 }
 </style>