大屏表格滚动封装

封装表格组件

不同表格展示表头、内容不同，后端返回表格数据的字段也不同。
所以需要传入后端字段，遍历字段展示数据。

  <div class="tb-header">
    <div
      v-for="item in tbName"
      class="tb-item"
      :style="{ width: item.width + '%' }"
    >
      {{ item.name }}
    </div>
  </div>
  <div class="tb-body">
    <div class="tb-body" style="height: 996px" :class="{ anim: animate }">
      <div
        class="tb-list"
        v-for="(item, index) in tbData"
        :class="{ 'tb-zebra1': !lineType, 'tb-zebra2': lineType }"
      >
        <div
          v-for="itemSon in tbName"
          class="tb-item"
          :style="{ width: itemSon.width + '%' }"
        >
          {{ item[itemSon.param] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
interface tbName {
  name: number;
  param: number;
  width: number;
}
interface tbMap {
  all_count: number;
  proportion: number;
  pi_name: string;
  serial_no: number;
}
const props = defineProps<{
  tbName: tbName[];
  tbData: tbMap[];
}>();
const timer = ref(null as any);
const animate = ref(false);
const lineType = ref(false);
onMounted(() => {
  setRoll();
});
function setRoll() {
  setInterval(() => {
    tabelRoll();
  }, 3000);
}
function tabelRoll() {
  clearTimeout(timer.value);
  animate.value = true;
  timer.value = setTimeout(() => {
    if (props.tbData && props.tbData.length > 10) {
      props.tbData.push(props.tbData[0]);
      props.tbData.shift();
      lineType.value = !lineType.value;
      animate.value = false;
    }
  }, 500);
}
</script>

<style scoped lang="scss">
@import url(../static/style/item.scss);
</style>

表格样式

.chartBox {
  width: 1472px;
  height: 960px;
}
.tb-header {
  width: 1472px;
  background: #005aff30;
  color: #4fc4e8;
  font-size: 50px;
  height: 83px;
  line-height: 83px;
  margin-top: 20px;
}
.tb-body {
  width: 1472px;
  height: 830px;
  overflow: hidden;
}
.tb-list {
  width: 1472px;
  height: 83px;
  line-height: 83px;
  font-size: 42px;
}
.tb-item {
  float: left;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 83px;
}
.tb-zebra1 {
}
.tb-zebra2 {
}
.tb-zebra1:nth-child(odd) {
  background: #005aff10;
}
.tb-zebra2:nth-child(even) {
  background: #005aff10;
}
.anim {
  transition: all 0.5s;
  transform: translateY(-83px);
}

传入数据

const table2 = ref([] as tbMap[]);
const table2Name = ref([
  { name: "品种名称", param: "serial_no", width: 25 },
  { name: "最高价", param: "pi_name", width: 25 },
  { name: "最低价", param: "all_count", width: 25 },
  { name: "均价", param: "proportion", width: 25 },
]);
 ztFetch(res, "POST", "").then((res) => {
      table2.value = res;
});

效果