ehcarts可视化大屏-使用vue-seamless-scroll插件实现轮询列表

页面内容渲染主要是使用 vue-seamless-scroll 插件
前面也看过其他方法，页面方法太多了 ，比较麻烦
这个是目前发现最简单的了，安装下依赖就行，页面直接引用

import VueSeamlessScroll from 'vue-seamless-scroll'

先放效果图：

核心代码如下：

      <div class="scroll_table">
        <div style="display: inline-block; width: 100%">
          <table>
            <thead>
              <tr>
                <th :title="'时间'" valign="middle">时间</th>
                <th :title="'号牌号码'" valign="middle">号牌号码</th>
                <th :title="'告知/预警类型'" valign="middle">告知/预警类型</th>
              </tr>
            </thead>
          </table>
          <vue-seamless-scroll class="seamless-warp" style="width: 100%" :data="list">
            <table>
              <tbody>
                <tr v-for="(item, index) in list" :key="index">
                  <td :title="item.cjsj">{{ item.cjsj }}</td>
                  <td :title="item.hphm">{{ item.hphm }}</td>
                  <td class="warning_type" :title="item.itemname">{{ item.itemname }}</td>
                </tr>
              </tbody>
            </table>
          </vue-seamless-scroll>
        </div>
      </div>

.RealTimeWarning {
  height: calc(100% - 38px);
  overflow-y: auto;
  overflow-x: hidden;
  .scroll_table {
    display: flex;
    height: 100%;
    .seamless-warp {
      height: calc(100% - 55px);
      overflow: hidden;
    }
  }
  table {
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    margin: 10px 0 0 0;
    th,
    td {
      max-width: 10px;
      padding: 5px;
      vertical-align: middle;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    thead {
      height: 20px;
      line-height: 20px;
      color: #39dfffab;
      background: transparent;
    }
    tbody {
      color: #fff;
      cursor: pointer;
      tr {
        td {
          height: 32px;
          line-height: 32px;
        }
      }
      tr:nth-child(odd) {
        background: rgba(35, 170, 230, 0.14);
      }
      tr:nth-child(even) {
        background: transparent;
      }
    }
    .warning_type {
      color: #15fcff;
    }
  }
}