.....

src/pages/ksfx/cjfx_cjd/[ykj_id].vue

@@ -16,7 +16,7 @@
         </div>
 
         <div class="h-218px mt-5px  bg-gray-500 py-4 pl-150px pr-100px perfectShow">
-          <div class="h-full  flex justify-between" v-if="rangeData.length==0">
+          <div class="h-full  flex justify-between" v-if="rangeData.length!=0">
             <div class="h-full bg-opacity-20 rounded singlepart" v-for="(item, index) in rangeData" :key="index">
               <div class="h-1/3 text-center py-4  RankLabel">
                 <img :src="'/images/one'+(index+1)+'.png'" alt="">
@@ -34,64 +34,13 @@
           </div>
         </div>
 
-        <div class="w-full h-auto mt-9px listMain" >
-          <div class="h-74px  rounded px-4 listMain_title" >
-            <div class="float-left singleTitle" :class="{ 'h-full singleDupli': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.kh }}</div>
-            <div class="float-left singleTitle" :class="{ 'h-full singleDupli': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.xm }}</div>
-            <div class="float-left singleTitle" :class="{ 'h-full singleDupli': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.bj }}</div>
-
-            <div class="h-full float-left singleDupli" v-for="(secItem, secIndex) in listTitleShow.subInfo" :key="secIndex">
-              <div class="h-1/2 text-center">{{ secItem.subTitle }}</div>
-              <div class="h-1/2 flex flex-wrap flex-grow justify-between flex-nowrap">
-                <div class="secFullWidth">{{ secItem.fs }}</div>
-                <div class="secFullWidth">{{ secItem.bp }}</div>
-                <div class="secFullWidth">{{ secItem.np }}</div>
-              </div>
-            </div>
-
-          </div>
-
-          <div class="h-60px px-4 listMain_cont" :class="{ 'whiteBG': (index + 1) % 2 != 1 }"
-            v-for="(item, index) in listShow" :key="index">
-            <div class="float-left singleContentSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.kh }}</div>
-            <div class="float-left singleContentSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.xm }}</div>
-            <div class="float-left singleContentSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.bj }}</div>
-            <div class="h-full float-left singleDSec" v-for="(secItem, secIndex) in item.subInfo" :key="secIndex">
-              <div class="h-full flex flex-wrap flex-grow justify-between flex-nowrap">
-                <div class="secFullWidth">{{ secItem.fs }}</div>
-                <div class="secFullWidth">{{ secItem.bp }}</div>
-                <div class="secFullWidth">{{ secItem.np }}</div>
-              </div>
-            </div>
-
-          </div>
-
-        </div>
-
-
-        <!-- 优化的图标结构 -->
-
-        <el-table :data="tableMicData" style="width: 100%" v-if="false">
-        <el-table-column  prop="kh"  align="center"  label="考号" width="150px;"> </el-table-column>
-        <el-table-column  prop="xm"  align="center"  label="姓名" width="150px;"> </el-table-column>
-        <el-table-column  prop="bj"  align="center"  label="班级" width="150px;"> </el-table-column>
-        <!-- 循环1级表头 -->
-        <template v-for="(item, index) in tableMicTitle" :key="index">
-          <el-table-column align="center"  :label="item" >
-            <!-- 循环2级表头 -->
-            <template v-for="items in tableMicLabel"  :key="items.key">
-              <el-table-column :label="items.label"  align="center">
-                <template slot-scope="scope">
-                <span>
-                  {{ scope }}888
-                  <!-- {{ scope.row.type[index][items.key] }} -->
-                </span>
-              </template>
-              </el-table-column>
+        <el-table :data="tableData" :border="true" :show-header="true" :header-row-style="{ background: '#003eee' }">
+          <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
+            <template v-if="item.children">
+              <el-table-column v-for="(childItem, childIndex) in item.children" :key="childIndex" :prop="childItem.prop" :label="childItem.label" :width="childItem.width"></el-table-column>
             </template>
           </el-table-column>
-        </template>
-      </el-table>
+        </el-table>
 
 
 
@@ -123,98 +72,15 @@ const parentClick = (val: string) => {
   ykjId.value = route.params.ykj_id;
 }
 
-let rangeData =ref([])
-let listTitleShow = ref({
-  "kh": "考号",
-  "xm": "姓名",
-  "bj": "班级",
-  "subInfo": [
-    {
-      "subTitle": "语文",
-      "fs": "分数",
-      "bp": "班排",
-      "np": "年排",
-    }
-  ]
-});
-let listShow = ref([
-  {
-    "kh": "2345443211",
-    "xm": "迪丽热巴",
-    "bj": "初一（2）班",
-    "subInfo": [
-      {
-        "subTitle": "语文",
-        "fs": "87.45",
-        "bp": "1",
-        "np": "1",
-      }
-
-    ]
-  },
-]);
-
+const rangeData =ref([])
+const tableHeader =ref([]);
+const tableData = ref([]);
 
 ykjId.value = route.params.ykj_id;
 
-const tableMicTitle = ref();
-
-const tableMicData = ref(
-  [{
-    kh: "1000001",
-    xm:"力王",
-    bj:"初一（1）班",
-    type: [
-    { tab: "语文", aa: "11", bb: "12", cc: "13" },
-      { tab: "数学", aa: "21", bb: "22", cc: "23" },
-      { tab: "外语", aa: "1", bb: "2", cc: "33" },
-    ],
-  },
-  {
-    kh: "1000002",
-    xm:"力王就",
-    bj:"初一（2）班",
-    type: [
-      { tab: "语文", aa: "11", bb: "12", cc: "13" },
-      { tab: "数学", aa: "21", bb: "22", cc: "23" },
-      { tab: "外语", aa: "1", bb: "2", cc: "33" },
-    ],
-    }
-  ]
-);
-
-const tableMicLabel=ref([
-  {
-    label: "分数",
-    key: "aa",
-  },
-  {
-    label: "班排",
-    key: "bb",
-  },
-  {
-    label: "年排",
-    key: "cc",
-  },
-]);
-
 onMounted(() => {
   initData();
-
-  //循环+去重
-  aa();
-
 })
-const aa = () => {
-  let tableMicTitle_temp: Iterable<any>|null|undefined = [];
-  tableMicData.value.forEach(items=>{
-    items.type.forEach(item => {
-      tableMicTitle_temp.push(item.tab)
-     })
-  })
-  tableMicTitle.value = [...new Set(tableMicTitle_temp)];
-  console.log(tableMicTitle.value,"5645")
-}
 
 const school_id = ref("");
 const grade_id = ref("");
@@ -231,9 +97,9 @@ const initData =() => {
   cjfx_cjd_list(transObj)
     .then(res => {
       if (res.code == "1") {
-        listTitleShow.value = res.data.data.listTitleShow;
-        listShow.value = res.data.data.listShow;
         rangeData.value = res.data.data.rangeData;
+        tableHeader.value = res.data.data.tableHeader;
+        tableData.value = res.data.data.tableData;
       }
     })
   .catch(error=>{console.log(error)})
@@ -260,6 +126,11 @@ const exportBtn = () => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.is-group tr th){
+  background: #003eee!important;
+  color:#ffffff;
+  border:0 ;
+}
 :deep(.el-sub-menu__title){
   background: #003eee;
   color: #fff;