新增一个测试页面

src/routes.js

@@ -235,12 +235,21 @@ import TermSet from '@components/knowledgeExtra/TermSet.vue';
 import AddTermSet from '@components/knowledgeExtra/AddTermSet.vue';
 
 
+
 export default [
     {
         path: '/',
         name: 'login',
         component: Login,
     },
+    {
+        name: "newpage",
+        path: '/newpage',
+        component: () => import("@/views/NewPage.vue"),
+        meta: {
+            requireAuth: false,
+        },
+    },
     {
         path: '/register',
         name: 'Register',

src/views/NewPage.vue

@@ -1,34 +1,207 @@
 
 <template>
   <div class="new-page">
-    <div class="table"></div>
+    <div class="table">
+      <el-table
+        :data="tableData"
+        style="width: 500px"
+        :border="true"
+        stripe
+        :span-method="objectSpanMethod"
+        :cell-style="{ borderColor: '#C5C8C9', borderWidth: '2px' }"
+        :header-cell-style="{ borderColor: '#C5C8C9', borderWidth: '2px' }"
+      >
+        <el-table-column label="属" class-name="genus" width="50%">
+          <el-table-column prop="type" label="类型" class-name="genus-column">
+            <template slot-scope=""></template>
+          </el-table-column>
+          <el-table-column
+            prop="genericName"
+            label="属名"
+            class-name="genus-column"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="relativeRate"
+            label="相对丰度"
+            class-name="genus-column"
+          >
+          </el-table-column>
+          <el-table-column prop="num" label="序列数" class-name="genus-column">
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="种" class-name="species">
+          <el-table-column
+            prop="kindName"
+            label="种名"
+            class-name="species-column"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="trustRate"
+            label="鉴定置信度"
+            class-name="species-column"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="speciesNum"
+            label="序列数"
+            class-name="species-column"
+          ></el-table-column>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 <script>
 export default {
-  data: {
-    tableData: [
-      {
-        genus: {
-          type: "G-",
-          genusName: "耐瑟球菌属 Neisseria",
-          relativeAbundance: "19.1%",
-          sequenceNumber: "1324",
+  data() {
+    return {
+      tableData: [],
+      tData: [
+        {
+          type: "Bacillus",
+          genericName: "属名1",
+          relativeRate: 0.45,
+          num: 100,
+          strain: [
+            {
+              kindName: "Bacillus subtilis",
+              trustRate: 0.98,
+              num: 50,
+            },
+            {
+              kindName: "Bacillus cereus",
+              trustRate: 0.85,
+              num: 30,
+            },
+            {
+              kindName: "Bacillus cereus",
+              trustRate: 0.85,
+              num: 30,
+            },
+          ],
         },
-        species: {
-          speciesName: "微黄耐瑟球菌 Neisseria sunflava",
-          appraisalConfidenceLevel: "99%",
-          sequenceNumber: "137",
+        {
+          type: "Bacillus",
+          genericName: "属名2",
+          relativeRate: 0.45,
+          num: 100,
+          strain: [
+            {
+              kindName: "Bacillus subtilis",
+              trustRate: 0.98,
+              num: 50,
+            },
+            {
+              kindName: "Bacillus cereus",
+              trustRate: 0.85,
+              num: 30,
+            },
+          ],
         },
+      ],
+    };
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex < 4) {
+        const { spanStartIndex, spanNum } = this.tableSpan[row.genericName];
+        if (spanStartIndex === rowIndex) {
+          return [spanNum, 1];
+        } else {
+          return [0, 0];
+        }
+      } else {
+        return [1, 1];
+      }
+      // console.log(row, column, rowIndex, columnIndex);
+      // return [1, 1];
+    },
+  },
+  computed: {
+    tableSpan() {
+      const spanObj = {};
+      let genericName;
+      this.tableData.forEach((el, index) => {
+        if (!spanObj.hasOwnProperty(el.genericName)) {
+          genericName = el.genericName;
+          spanObj[genericName] = { spanStartIndex: index, spanNum: 1 };
+        } else {
+          spanObj[genericName].spanNum++;
+        }
+      });
+      return spanObj;
+    },
+  },
+  watch: {
+    tData: {
+      immediate: true,
+      deep: true,
+      handler(newVal, oldVal) {
+        newVal.forEach((d) => {
+          d.strain.forEach((el) => {
+            this.tableData.push({
+              type: d.type,
+              genericName: d.genericName,
+              relativeRate: d.relativeRate,
+              num: d.num,
+              kindName: el.kindName,
+              trustRate: el.trustRate,
+              speciesNum: el.num,
+            });
+          });
+        });
       },
-    ],
+    },
   },
-  methods: {},
-  computed: {},
-  watch: {},
   created: function () {},
   mounted: function () {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.new-page {
+  .table {
+    & /deep/ .genus {
+      background-color: #81d2e5;
+      color: white;
+      font-size: 20px;
+      font-weight: 800;
+    }
+    & /deep/ .species {
+      background-color: #008cd6;
+      color: white;
+      font-size: 20px;
+      font-weight: 800;
+    }
+    & /deep/ .el-table__header-wrapper .genus-column {
+      background-color: #dceef6;
+      font-size: 16px;
+      padding: 5px 0px;
+      .cell {
+        min-height: 30px;
+        vertical-align: middle;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    & /deep/ .el-table__header-wrapper .species-column {
+      background-color: #d5edff;
+      font-size: 16px;
+      padding: 5px 0px;
+      .cell {
+        min-height: 30px;
+        vertical-align: middle;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    & /deep/.el-table__body-wrapper .species-column {
+      background: skyblue;
+    }
+  }
+}
+</style>