测试矩阵央视逻辑完善

src/views/setting/testMatrix/index.vue

@@ -4,9 +4,11 @@
       height="calc(100vh - 300px)"
       :data="tableData"
       border
+      :header-cell-style="headerCellStyle"
       @cell-mouse-enter="cellMouseEnter"
       @cell-mouse-leave="cellMouseLeave"
       @cell-click="cellClick"
+      :cell-style="tableCellStyle"
     >
       <template v-for="(item, index) in echartsTabled">
         <el-table-column
@@ -146,7 +148,21 @@ export default {
   },
   methods: {
     viewDetail(row) {
-      console.log('viewDetailrow', row)
+      // console.log('viewDetailrow', row)
+      // console.log('表头信息', JSON.stringify(this.echartsTabled))
+      // console.log('表格内容', JSON.stringify(this.tableData))
+    },
+    headerCellStyle(row, rowIndex) {
+      if (row.columnIndex === 0) {
+        return { backgroundColor: '#1A6FD7' }
+      } else {
+        return { backgroundColor: '#F2F2F2' }
+      }
+    },
+    tableCellStyle(row, column, rowIndex, columnIndex) {
+      if (row.columnIndex === 0) {
+        return { backgroundColor: '#dde9f9' }
+      }
     },
     cellClick(row, column, cell, event) {
       // console.log('row', row)
@@ -156,6 +172,7 @@ export default {
     },
     /** 鼠标悬浮时的操作 */
     cellMouseEnter(e, row, cell, column) {
+      if (row.id !== 'el-table_1_column_1') {
         var selrange = document.getElementsByClassName(row.id)
         // console.log('row', row)
         // console.log('cell', cell)
@@ -164,19 +181,24 @@ export default {
           cell.style.backgroundColor = ''
           for (var i = 0; i < selrange.length; i++) {
             selrange[i].style.backgroundColor = ''
+            selrange[0].style.backgroundColor = '#F2F2F2'
           }
         } else {
-        cell.style.backgroundColor = '#fec171'
-        for (var i = 0; i < selrange.length; i++) {
-          selrange[i].style.backgroundColor = '#fec171'
+          cell.style.backgroundColor = '#F3F8FD'
+          for (var i = 1; i < selrange.length; i++) {
+            selrange[i].style.backgroundColor = '#F3F8FD'
+          }
         }
       }
     },
     /** 鼠标离开时的操作 */
     cellMouseLeave(e, row, cell) {
+      if (row.id !== 'el-table_1_column_1') {
         var selrange = document.getElementsByClassName(row.id)
         for (var i = 0; i < selrange.length; i++) {
-        selrange[i].style.backgroundColor = '#FFFFFF'
+          selrange[i].style.backgroundColor = ''
+          selrange[0].style.backgroundColor = '#F2F2F2'
+        }
       }
     }
   }
@@ -184,9 +206,9 @@ export default {
 </script>
 
 <style scoped>
-::v-deep .el-table__body tr:hover > td {
-  background-color: #fec171 !important;
-}
+/*::v-deep .el-table__body tr:hover > td {*/
+/*  background-color: #f3f8fd !important;*/
+/*}*/
 .table-span-style {
   text-align: center;
   color: #1890ff;