修复兼容问题

src/views/dataCenter/map/model/RankList/index.vue

 <template>
+  <div>
     <MapTitle text="创新示范区县(市、区）排名" />
 
     <el-scrollbar height="240px">
-    <el-table
-      :data="tableData"
-      size="small"
-      style="width: 100%"
-      empty-text="暂无数据"
-      header-row-class-name="tabs-header"
-    >
-      <el-table-column label="序号" width="120" align="center">
-        <template #default="scope">
+      <div class="tableBox">
+
+        <el-row class="tabletit">
+          <el-col :span="6">序号</el-col>
+          <el-col :span="12">地区</el-col>
+          <el-col :span="6">分数</el-col>
+        </el-row>
+        <el-row class="table_cell" v-for="(item, index) in tableData" :key="index">
+          <el-col :span="6">
             <div>
-            <div v-if="scope.$index > 2">{{ scope.$index + 1 }}</div>
-            <div
-              v-else
-              class="tab-index"
-              :style="{ background: `${colors[scope.$index + 1]}` }"
-            >{{ scope.$index + 1 }}</div>
+              <div v-if="index > 2">{{ index + 1 }}</div>
+              <div v-else class="tab-index" :style="{ background: colors[index + 1] }">{{ index + 1 }}
+              </div>
             </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="name" label="地区" align="center" />
-      <el-table-column prop="score" label="分数" width="120" align="center">
-        <template #default="scope">
-          <div>{{ scope.row.score }}</div>
-        </template>
-      </el-table-column>
-    </el-table>
+          </el-col>
+          <el-col :span="12">{{ item.name }}</el-col>
+          <el-col :span="6">{{ item.score }}</el-col>
+        </el-row>
+      </div>
+
     </el-scrollbar>
+  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
+<script>
 import MapTitle from "@/components/mapTitle/index.vue";
 import { Bottom, Top } from "@element-plus/icons";
 import Mock from "./mock";
 import { mapState } from "vuex";
 
-export default defineComponent({
+export default {
   components: {
     MapTitle,
     Bottom,
     Top,
   },
-  setup() {},
   computed: {
     ...mapState({
       curDataType: (state) => state.curDataType,
@@ -61,10 +55,7 @@ export default defineComponent({
       },
     };
   },
-  methods: {
-    detailsHandle() {},
-  },
-});
+};
 </script>
 <style>
 /* 火狐出行滚动条 */
@@ -72,40 +63,50 @@ export default defineComponent({
   display: none;
   width: 0 !important
 }
+
 .rank-list .el-scrollbar__wrap {
-  width: calc( 100% + 20px);
+  width: calc(100% + 20px);
 }
-.tabs-header .el-table__cell {
-  background-color: #0e4781 !important;
-  color: #d4f7ff;
+
+</style>
+<style lang="scss" scoped>
+.tableBox {
+  color: #ffffff;
+  width: calc(100% - 17px);
+
+  .tabletit .el-col {
     font-weight: bold;
     font-size: 14px;
-}
-.el-table__body tr:hover > td {
-  background-color: #134087 !important;
-}
-.el-table tr {
-  background: #093971 !important;
-}
-.el-table td.el-table__cell,
-.el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px dashed #125ba3;
-}
-.el-scrollbar {
-  height: 86%;
-  border-bottom: 1px dashed #125ba3;
-}
-.el-table .cell {
+    background-color: #0e4781 !important;
+  }
+
+  .el-col {
     color: #d4f7ff;
+    font-size: 12px;
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 23px;
+
+  }
+
+  .el-row {
+    border-bottom: 1px dashed #10529a;
+    background-color: #093971;
+  }
+
+  .tab-index {
+    font-weight: bold;
+  }
+
+
 }
-</style>
-<style lang="scss" scoped>
+
 .el-scrollbar {
   margin-top: 10px;
 }
-.tab-other-index {
-  text-align: center;
-}
+
 .tab-index {
   border-radius: 50%;
   display: flex;