vue自定义table表实现内容上下循环滚动_vue 实现内容上下循环滚动

需求

对一段table表数据进行异常与正常类型的分类处理；
异常数据固定于table表内上方显示；
正常数据则在异常数据下方实现循环滚动效果；
（若正常数据高度未溢出table表高度，正常显示即可，无需滚动）

效果图展示

代码核心部分

<!-- html 部分-->

<!--   
scrollWrap: 滚动区域； 
scrollWrapHeight：table总高度 - header高度 - 异常数据高度 
-->
<div
  class="scrollWrap"
  :style="{
    height: scrollWrapHeight + 'px',
    overflowY: 'hidden',
  }"
>
<!--   
scrollNum：滚动时，复制正常table数据一份，用于上下循环滚动无缝衔接
-->
  <div
    :class="scrollNum > 1 ? 'scroll' : ''"
    :style="{
      animationDuration: time + 's',
    }"
    v-for="(a, index) in scrollNum"
    :key="index"
  >
    <div
      class="table-bodySuccess"
      v-for="(item, index) in successData"
      :key="index"
      :style="{
        background: successBgColor(index),
      }"
    >
      <div class="table-body-item-title">
        {{ item.name }}
      </div>
      <div class="table-body-item-title">
        <div class="circle"></div>
      </div>
      <div class="table-body-item-title">{{ item.tampNum }}℃</div>
      <div class="table-body-item-title">{{ item.eleNum }}A</div>
    </div>
  </div>
</div>

<!-- css 部分-->
 .scrollWrap::-webkit-scrollbar {
   width: 0 !important;
 }
 .scroll {
   animation: scrollData 10s infinite linear;
 }
 @keyframes scrollData {
   from {
     transform: translateY(0px);
   }
   to {
     transform: translateY(-100%);
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

完整代码展示

<template>
  <div class="left">
    <div class="table">
      <div class="table-header">
        <div class="table-header-item-title">名称</div>
        <div class="table-header-item-title">状态</div>
        <div class="table-header-item-title">数据标题1</div>
        <div class="table-header-item-title">数据标题2</div>
      </div>
      <div
        class="table-bodyError"
        v-for="(item, index) in errData"
        :key="index"
        :style="{ background: errBgColor(index) }"
      >
        <div class="table-body-item-title">
          {{ item.name }}
        </div>
        <div class="table-body-item-title">
          <div class="circle"></div>
        </div>
        <div class="table-body-item-title">
          {{ item.tampNum }}
        </div>
        <div class="table-body-item-title">
          {{ item.eleNum }}
        </div>
      </div>
      <div
        class="scrollWrap"
        :style="{
          height: scrollWrapHeight + 'px',
          overflowY: 'hidden',
        }"
      >
        <div
          :class="scrollNum > 1 ? 'scroll' : ''"
          :style="{
            animationDuration: time + 's',
          }"
          v-for="(a, index) in scrollNum"
          :key="index"
        >
          <div
            class="table-bodySuccess"
            v-for="(item, index) in successData"
            :key="index"
            :style="{
              background: successBgColor(index),
            }"
          >
            <div class="table-body-item-title">
              {{ item.name }}
            </div>
            <div class="table-body-item-title">
              <div class="circle"></div>
            </div>
            <div class="table-body-item-title">{{ item.tampNum }}℃</div>
            <div class="table-body-item-title">{{ item.eleNum }}A</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      // 调节滚动速率
      time: 15,
      errData: [
        { name: 11, status: 0, tampNum: 10, eleNum: 15 },
        { name: 22, status: 0, tampNum: 10, eleNum: 15 },
        { name: 33, status: 0, tampNum: 10, eleNum: 15 },
      ],
      successData: [
        { name: 'aaa', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'bbb', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'ccc', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'ddd', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'eee', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'fff', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'ggg', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'hhh', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'iii', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'jjj', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'kkk', status: 1, tampNum: 10, eleNum: 15 },
      ],
    }
  },
  computed: {
    errBgColor: function () {
      return function (index) {
        if (index % 2 === 0) {
          return '#e8f7ff'
        } else {
          return '#ffffff'
        }
      }
    },
    successBgColor: function () {
      return function (index) {
        if (this.errData.length % 2 === 0) {
          if (index % 2 === 0) {
            return '#e8f7ff'
          } else {
            return '#ffffff'
          }
        } else {
          if (index % 2 === 0) {
            return '#ffffff'
          } else {
            return '#e8f7ff'
          }
        }
      }
    },
    // 滚动层高度
    scrollWrapHeight: function () {
      // left高度 - table-header高度 - table-bodyError高度 * 个数
      return 600 - 52 - this.errData.length * 52
    },
    // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画
    // 否则就一份，不填加滚动动画
    scrollNum: function () {
      let successHeight = this.successData.length * 52
      if (successHeight > this.scrollWrapHeight) {
        return 2
      } else {
        return 1
      }
    },
  },
}
</script>

<style lang="less" scoped>
.left {
  width: 520px;
  height: 600px;
  background-color: #fab4b4;
  border-bottom: 1px solid red;
  position: relative;
  .table-header {
    width: 100%;
    background-color: skyblue;
    color: #e1f3ff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    .table-header-item-title {
      height: 52px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .table-bodyError,
  .table-bodySuccess {
    width: 100%;
    color: red;
    font-size: 16px;
    display: flex;
    .table-body-item-title {
      width: 100%;
      height: 52px;
      display: flex;
      justify-content: center;
      align-items: center;
      .circle {
        width: 12px;
        height: 12px;
        background: #ea4141;
        border-radius: 50%;
      }
    }
  }
  .table-bodySuccess {
    color: #000;
    .table-body-item-title {
      .circle {
        background: #29b153;
      }
    }
  }
  .scrollWrap::-webkit-scrollbar {
    width: 0 !important;
  }
  .scroll {
    animation: scrollData 10s infinite linear;
  }
  @keyframes scrollData {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-100%);
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206