调整表格行

src/features/projectCompareManagement/ProjectCompareManagement.vue

@@ -22,8 +22,10 @@
     <div class="tw-bg-white tw-p-5 tw-rounded-xl">
       <a-table
         rowKey="id"
+        :customRow="customRow"
         :columns="columns"
         :data-source="data"
+        :scroll="{ x: 1200, y: 800 }"
         :pagination="{
           pageSize: pageSize,
           current: pageNo,
@@ -38,7 +40,7 @@
         <template #courseName="{ record }">
           <a>{{ record.courseName }}({{ record.courseCode }})</a>
         </template>
-        <template #action="{ record }">
+        <!-- <template #action="{ record }">
           <span>
             <a-button
               v-if="record.projectId !== contrastProjectId"
@@ -46,7 +48,7 @@
               >查看详情</a-button
             >
           </span>
-        </template>
+        </template> -->
       </a-table>
     </div>
   </div>
@@ -56,9 +58,9 @@
 import { getProjectCompareList } from "@/api/projectCompareManagementPage";
 import router from "@/router";
 import { useMainStore } from "@/store";
-import { SASPaper } from "@/types";
-import { message } from "ant-design-vue";
-import { watch, onMounted, toRaw } from "vue";
+import type { SASPaper } from "@/types";
+import { message, Button } from "ant-design-vue";
+import { watch, onMounted, toRaw, h } from "vue";
 
 const store = useMainStore();
 store.currentLocation = "项目管理 / 关联分析";
@@ -115,6 +117,7 @@ const columns = [
     title: "科目",
     dataIndex: "courseName",
     slots: { customRender: "courseName" },
+    fixed: "left",
     width: 140,
   },
   {
@@ -169,30 +172,48 @@ const columns = [
   {
     title: "操作",
     key: "action",
-    slots: { customRender: "action" },
+    fixed: "right",
+    width: "140px",
+    // dataIndex: "courseName",
+    // slots: { customRender: "action" },
     // slots: {
-    //   customRender: ({ text, index }) => {
-    //     console.log(text, index);
-    //     const obj = {
-    //       children: text,
-    //       props: {} as any,
-    //     };
-    //     if (index === 2) {
-    //       obj.props.rowSpan = 2;
-    //     }
-    //     // These two are merged into above cell
-    //     if (index === 3) {
-    //       obj.props.rowSpan = 0;
-    //     }
-    //     if (index === 4) {
-    //       obj.props.colSpan = 0;
-    //     }
-    //     return obj;
-    //   },
+    customRender: ({ record, index }: { record: SASPaper; index: number }) => {
+      // console.log(text, index);
+      // These two are merged into above cell
+      let rowSpan = 1;
+      if (index % projectIds.length === 0) {
+        rowSpan = projectIds.length;
+      } else {
+        rowSpan = 0;
+      }
+      return {
+        children: h(
+          Button,
+          {
+            onClick: () => goCompareDetail(record.courseCode),
+          },
+          () => "查看详情"
+        ),
+        props: {
+          rowSpan,
+        },
+      };
+    },
     // },
   },
 ];
 
+function customRow(record: SASPaper, index: number) {
+  // console.log(args);
+  let backgroundColor = "white";
+  if (index % projectIds.length === 0) {
+    backgroundColor = "lightgrey";
+  }
+  return {
+    style: { backgroundColor },
+  };
+}
+
 onMounted(() => {
   rootOrgId = store.userInfo.rootOrgId;
 });