成绩分析总分列表样式调整

src/views/analysisReport/studentPage/scrolReport/transcript_total.vue

@@ -15,7 +15,19 @@
           stripe
           align="left"
         >
-          <el-table-column v-for="title in subjectData.titleData" :key="title.prop" align="center" :label="title.name">
+          <!-- 科目列固定在左侧 -->
+          <el-table-column
+            v-if="subjectNameTitle"
+            align="center"
+            :label="subjectNameTitle.name"
+            fixed="left"
+            min-width="100"
+          >
+            <template slot-scope="scope">
+              {{ scope.row?.subjectName || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column v-for="title in middleTitleData" :key="title.prop" align="center" :label="title.name" min-width="100">
             <template slot-scope="scope">
               <template v-if="title.prop == 'score'">
                 <!-- * 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
@@ -28,19 +40,28 @@
                 </template>
                 <template v-else>{{ scope.row?.[title.prop] || '-' }}</template>
               </template>
-              <template v-else-if="title.prop == 'imgUrlList'">
-                <!-- :disabled="!scope?.row?.imgUrlList || scope?.row?.imgUrlList == '-'" -->
-                <el-button
-                  v-if="scope.row.isTotal == 0 && scope.row.subjectGroupType == 0"
-                  type="text"
-                  @click="OpenStudentPaper(scope.row.subjectCode)"
-                  >查看答题卡</el-button
-                >
-                <template v-else>-</template>
-              </template>
               <template v-else>{{ scope.row?.[title.prop] || '-' }}</template>
             </template>
           </el-table-column>
+          <!-- 查看答题卡列固定在右侧 -->
+          <el-table-column
+            v-if="imgUrlListTitle"
+            align="center"
+            :label="imgUrlListTitle.name"
+            fixed="right"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                v-if="scope.row.isTotal == 0 && scope.row.subjectGroupType == 0"
+                type="text"
+                size="small"
+                @click="OpenStudentPaper(scope.row.subjectCode)"
+                >查看答题卡</el-button
+              >
+              <template v-else>-</template>
+            </template>
+          </el-table-column>
         </el-table>
         <div class="page_jg_20"></div>
       </div>
@@ -233,8 +254,19 @@ export default {
     }, //分析报告公共参数变量
     getSubjectName() {
       return this.$store.state.report.filterObject.subjectName
-    }
-  },
+    },
+    // 获取科目列的表头数据
+    subjectNameTitle() {
+      return this.subjectData.titleData.find(t => t.prop === 'subjectName')
+    },
+    // 过滤掉subjectName和imgUrlList列的中间表头数据
+    middleTitleData() {
+      return this.subjectData.titleData.filter(t => t.prop !== 'imgUrlList' && t.prop !== 'subjectName')
+    },
+    // 获取imgUrlList列的表头数据
+    imgUrlListTitle() {
+      return this.subjectData.titleData.find(t => t.prop === 'imgUrlList')
+    }},
   created() {},
   mounted() {
     this.PageInit() //页面初始加载数据