移除key ，删除滚动的字体

src/components/Scroll.vue

@@ -1,20 +1,28 @@
 <template>
-	<div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc"
+  <div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc" @mousewheel="mousewheelFunc">
-			@mousewheel="mousewheelFunc">
+    <div
-			<div class="list-body" :class="{
+      class="list-body"
+      :class="{
         'list-body2': isHorizontal,
-					canScroll:!isCanScroll
+        canScroll: !isCanScroll,
-			}" ref="listBody" :style="{ transform: getScrollDistance() }">
+      }"
+      ref="listBody"
+      :style="{ transform: getScrollDistance() }">
       <slot></slot>
     </div>
-			<div class="list-body" :class="{
+    <div
-					'list-body2': isHorizontal
+      class="list-body"
-			}" ref="tBody" v-if="isCanScroll" :style="{ transform: getScrollDistance() }">
+      :class="{
+        'list-body2': isHorizontal,
+      }"
+      ref="tBody"
+      v-if="isCanScroll"
+      :style="{ transform: getScrollDistance() }">
       <slot></slot>
     </div>
   </div>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { computed, ref, nextTick, onMounted } from 'vue';
 //滚动距离
 const scrollDistance = ref(0);
@@ -31,34 +39,32 @@ const animationFrame = ref();
 const isCanScroll = ref(true);
 const scrollBody = ref<any>(null);
 const listBody = ref<any>(null);
-const props = defineProps(
+const props = defineProps({
-	{
   steep: {
     //滚动速度
     type: Number,
-					default: 1
+    default: 1,
   },
   scrollDirection: {
     //滚动方向
     type: String,
-					default: "top"
+    default: 'top',
   },
   isRoller: {
     //是否可以滑轮滚动
     type: Boolean,
-					default: true
+    default: true,
   },
   rollerScrollDistance: {
     //滑轮滚动的距离
     type: Number,
-					default: 20
+    default: 20,
   },
-			data: Array
+  data: Array,
-	}
+});
-)
 const isHorizontal = computed(() => {
-	return props.scrollDirection === "left" || props.scrollDirection === "right"
+  return props.scrollDirection === 'left' || props.scrollDirection === 'right';
-})
+});
 
 const start = () => {
   //判断是否可以滚动函数
@@ -79,7 +85,7 @@ const start = () => {
   if (isCanScroll.value) {
     run();
   }
-}
+};
 
 const run = () => {
   //清空动画
@@ -107,26 +113,20 @@ const run = () => {
     }
     //判断滚动值
     if (!isStop.value) {
-					if (
+      if (props.scrollDirection === 'top' || props.scrollDirection === 'left') {
-							props.scrollDirection === "top" ||
-							props.scrollDirection === "left"
-					) {
         scrollDistance.value -= props.steep;
-					} else if (
+      } else if (props.scrollDirection === 'bottom' || props.scrollDirection === 'right') {
-							props.scrollDirection === "bottom" ||
-							props.scrollDirection === "right"
-					) {
         scrollDistance.value += props.steep;
       }
       run();
     }
   });
-}
+};
 
 const stop = () => {
   isStop.value = !0;
   clearAnimation();
-}
+};
 
 const initData = () => {
   nextTick(() => {
@@ -138,12 +138,8 @@ const initData = () => {
     listWidth.value = listBody.value?.clientWidth;
 
     if (
-					(bodyHeight.value !== 0 &&
+      (bodyHeight.value !== 0 && listHeight.value !== 0 && listHeight.value >= bodyHeight.value) ||
-							listHeight.value !== 0 &&
+      (bodyWidth.value !== 0 && listWidth.value !== 0 && listWidth.value >= bodyWidth.value)
-							listHeight.value >= bodyHeight.value) ||
-					(bodyWidth.value !== 0 &&
-							listWidth.value !== 0 &&
-							listWidth.value >= bodyWidth.value)
     ) {
       isCanScroll.value = true;
       start();
@@ -151,31 +147,31 @@ const initData = () => {
       isCanScroll.value = false;
     }
   });
-}
+};
 
 //     //获取滚动样式
 const getScrollDistance = () => {
   let style;
   if (!isHorizontal.value) {
-			style = "translate(0px, " + scrollDistance.value + "px)";
+    style = 'translate(0px, ' + scrollDistance.value + 'px)';
   } else {
-			style = "translate(" + scrollDistance.value + "px,0px)";
+    style = 'translate(' + scrollDistance.value + 'px,0px)';
   }
   return style;
-}
+};
 const clearAnimation = () => {
   if (animationFrame.value) {
     cancelAnimationFrame(animationFrame.value);
     animationFrame.value = null;
   }
-}
+};
 
 const mouseenterFunc = () => {
   stop();
-}
+};
 const mouseleaveFunc = () => {
   start();
-}
+};
 const mousewheelFunc = (e: any) => {
   if (!isCanScroll.value || !props.isRoller) {
     return false;
@@ -187,21 +183,17 @@ const mousewheelFunc = (e:any) => {
     scrollDistance.value += props.rollerScrollDistance;
   }
   run();
-}
+};
-
-
 
 onMounted(() => {
   //初始化页面数据
   initData();
-}
+});
-)
 </script>
 
 <style scoped>
 .custom-list {
   white-space: nowrap;
-	font-size: 14px;
   overflow: hidden;
   height: 100%;
 }
@@ -209,7 +201,6 @@ onMounted(() => {
 .list-body {
   overflow: hidden;
   white-space: nowrap;
-	font-size: 14px;
 }
 
 .canScroll {
@@ -221,4 +212,3 @@ onMounted(() => {
   display: inline-block;
 }
 </style>
-

src/components/ScrollTable.vue

@@ -2,10 +2,10 @@
   <div class="scrolltable" :style="gridStyle">
     <div class="row header">
       <div class="cell">序号</div>
-      <div v-for="(head, i) in heads" :key="i" class="cell">{{ head }}</div>
+      <div v-for="(head, i) in heads" class="cell">{{ head }}</div>
     </div>
     <Scroll :data="datas" :steep="0.08" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
-      <div v-for="(rows, i) in datas" class="row content" key="i">
+      <div v-for="(rows, i) in datas" class="row content">
         <div class="cell no">{{ i + 1 }}</div>
         <div v-for="(row, r) in rows" :class="{ cell: true, [cellType[r]]: !!cellType[r], [row.split('.')[1]]: !!row.split('.')[1] }">{{ row.split('.')[0] }}</div>
       </div>
@@ -104,7 +104,8 @@ const gridStyle = computed(() => {
         background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADYSURBVBiVTY8xSkNBGAbnX/YZHwTUEwQ9QCptbGwsxcJSEWxt0z1IEbBIZ+sBxPIpSC4ggim0sxc8gabJLtnNfikEyRxgmDGA+Drec0s3crhDgEJ5K7mMNo+bL9PLzW7KPJu0zRoy+608py6FMCSFLiW2Ps77Ps77lNiSQjeFMLTFZPAJ1BXhwE7ufgA0ud5J1O8GwVuOGZRRR//+1JFZzA6ytxymgqOi2OjpagxQyqxBLIWbmtrznpLuBVvrkQYzq+zSAMLDWW8DDUy2/3egjwV2W188fq8AvYtk5QJg+FMAAAAASUVORK5CYII=')
           center center no-repeat;
       }
-      &.red { // 实例样式
+      &.red {
+        // 实例样式
         &::before {
           --iconwidth: 16px;
           content: ' ';