测试矩阵动态列表逻辑修改

src/views/setting/testMatrix/index.vue

 <template>
   <page-standard>
     <el-table
+      height="calc(100vh - 300px)"
       :data="tableData"
-      style="width: 100%"
       border
       @cell-mouse-enter="cellMouseEnter"
       @cell-mouse-leave="cellMouseLeave"
+      @cell-click="cellClick"
     >
-      <el-table-column
-        prop="test"
-        width="240"
-        align="center"
-        label="测试场景\测试类型"
-      />
-      <el-table-column prop="file" align="center" label="文件审核">
-        <template slot-scope="scope">
-          <div v-if="scope.row.file === '1'" class="table-span-style">
-            {{ '√' }}
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="missedScan" align="center" label="系统服务漏扫" />
-      <el-table-column prop="portScanning" align="center" label="端口扫描" />
-      <el-table-column prop="tampering" align="center" label="篡改伪造" />
-      <el-table-column prop="fuzzing" align="center" label="模糊测试" />
-      <el-table-column prop="fuzzing" align="center" label="重放攻击" />
-      <el-table-column prop="fuzzing" align="center" label="非授权安装" />
-      <el-table-column prop="fuzzing" align="center" label="非授权访问" />
-      <el-table-column prop="fuzzing" align="center" label="非授权写入" />
-      <el-table-column prop="fuzzing" align="center" label="防病毒测试" />
-      <el-table-column prop="fuzzing" align="center" label="数据泄露" />
+      <template v-for="(item, index) in echartsTabled">
+        <el-table-column
+          :key="index"
+          :width="item.width ? item.width : ''"
+          :fixed="item.width ? true : false"
+          :label="item.tableNmae"
+          align="center"
+        >
+          <template slot-scope="scope" height="calc(100vh - 350px)">
+            <span v-if="index === 0">{{ scope.row[item.tableCode] }}</span>
+            <div
+              v-if="scope.row[item.tableCode].status === '1'"
+              class="table-span-style"
+              @click="viewDetail(scope.row[item.tableCode])"
+            >
+              {{ '√' }}
+            </div>
+          </template>
+        </el-table-column>
+      </template>
     </el-table>
   </page-standard>
 </template>
@@ -39,70 +37,106 @@ export default {
   name: 'Index',
   data() {
     return {
-      tableData: [
+      // 表头信息
+      echartsTabled: [
         {
-          test: 'TBOX-蜂窝以太网接口',
-          file: '1',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          tableNmae: '测试场景\\测试类型',
+          tableCode: 'test'
         },
         {
-          test: 'WiFi AP接口',
-          file: '',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          tableNmae: '文件审核',
+          tableCode: 'file'
         },
         {
-          test: 'WiFi Client接口',
-          file: '1',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          tableNmae: '系统服务漏扫',
+          tableCode: 'missedScan'
         },
         {
-          test: '充电以太网接口',
-          file: '',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          tableNmae: '固件代码漏扫',
+          tableCode: 'codeScan'
         },
         {
-          test: 'CAN 诊断接口（OBD）',
-          file: '',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          tableNmae: '端口扫描',
+          tableCode: 'portScanning'
+        }
+      ],
+      // 表格内容
+      tableData: [
+        {
+          test: 'TBOX-蜂窝以太网接口',
+          file: {
+            id: 0,
+            status: '1'
+          },
+          missedScan: {
+            id: 0,
+            status: '1'
+          },
+          codeScan: {
+            id: 0,
+            status: '1'
+          },
+          portScanning: {
+            id: 0,
+            status: '1'
+          }
         },
         {
-          test: '以太网诊断接口（OBD）',
-          file: '',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          test: 'WiFi AP接口',
+          file: {
+            id: 1,
+            status: '1'
+          },
+          missedScan: {
+            id: 1,
+            status: '1'
+          },
+          codeScan: {
+            id: 1,
+            status: '1'
+          },
+          portScanning: {
+            id: 1,
+            status: '1'
+          }
         },
         {
-          test: '车载摄像头以太网接口（无线）',
-          file: '',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          test: 'WiFi Client接口',
+          file: {
+            id: 2,
+            status: ''
+          },
+          missedScan: {
+            id: 2,
+            status: ''
+          },
+          codeScan: {
+            id: 2,
+            status: ''
+          },
+          portScanning: {
+            id: 2,
+            status: ''
+          }
         },
         {
-          test: '第三方应用软件',
-          file: '',
-          missedScan: '',
-          portScanning: '',
-          tampering: '',
-          fuzzing: ''
+          test: '充电以太网接口',
+          file: {
+            id: 3,
+            status: '1'
+          },
+          missedScan: {
+            id: 3,
+            status: '1'
+          },
+          codeScan: {
+            id: 3,
+            status: '1'
+          },
+          portScanning: {
+            id: 3,
+            status: '1'
+          }
         }
       ],
       formConfig: {
@@ -111,19 +145,28 @@ export default {
     }
   },
   methods: {
+    viewDetail(row) {
+      console.log('viewDetailrow', row)
+    },
+    cellClick(row, column, cell, event) {
+      // console.log('row', row)
+      // console.log('column', column)
+      // console.log('cell', cell)
+      // console.log('event', event)
+    },
     /** 鼠标悬浮时的操作 */
     cellMouseEnter(e, row, cell, column) {
       var selrange = document.getElementsByClassName(row.id)
-      console.log('row', row)
-      console.log('cell', cell)
-      console.log('selrange', selrange)
+      // console.log('row', row)
+      // console.log('cell', cell)
+      // console.log('selrange', selrange)
       if (this.formConfig.isNoHoverColor) {
         cell.style.backgroundColor = ''
         for (var i = 0; i < selrange.length; i++) {
           selrange[i].style.backgroundColor = ''
         }
       } else {
-        cell.style.backgroundColor = 'pink'
+        cell.style.backgroundColor = '#fec171'
         for (var i = 0; i < selrange.length; i++) {
           selrange[i].style.backgroundColor = '#fec171'
         }
@@ -133,7 +176,7 @@ export default {
     cellMouseLeave(e, row, cell) {
       var selrange = document.getElementsByClassName(row.id)
       for (var i = 0; i < selrange.length; i++) {
-        selrange[i].style.backgroundColor = ''
+        selrange[i].style.backgroundColor = '#FFFFFF'
       }
     }
   }
@@ -147,5 +190,6 @@ export default {
 .table-span-style {
   text-align: center;
   color: #1890ff;
+  cursor: pointer;
 }
 </style>