【Vue封装滚动表格组件】

<template>
  <div class="swiper-table-box">
    <table class="box-table-th" :style="{ height:props.height_bt}" cellpadding="0" cellspacing="0">
      <tr>
        <td v-for="(item, index) in props.table_th" :key="index" :style="{ width: item.width }">
          {{ item.name }}
        </td>
      </tr>
    </table>
    <div  class="box-table-tr" :style="{height: height_content}">
          <table  cellspacing="0" cellpadding="0" style="border-collapse: separate; border-spacing: 0 6px">
            <tr  v-for="(item, index) in props.datas" :key="index">
              <td v-for="(option, k) in props.table_th" :key="k" :style="{ width: option.width }" :title="item[option.value]">
                <span>{{ item[option.value] }}</span>
              </td>
            </tr>
          </table>
      <!-- <p class="box-tips flex-row null-data">暂无数据</p> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, markRaw,getCurrentInstance} from 'vue'
const props = defineProps({
    timer: {
      type: String,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return null;
      },
    },
    table_th: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return [
          {name:"c才",width:'50px',value:'ss'},
          {name:"6",width:'50px',value:'dd'},
          {name:"7",width:'50px',value:'bb'},
          {name:"8",width:'50px',value:'zz'},
          ];
      },
    },
    datas: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return [
            {ss:"我是谁",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁1",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁",dd:"6666",bb:7777,zz:8888},
            {ss:"我是谁",dd:"6666",bb:7777,zz:8888},
           
        ];
      },
    },
    height_bt: {
      type: String,
      default: '36px',
    },
    height_content: {
      type: String,
      default: 'calc(100% - 40px)',
    },
})
const {proxy} = getCurrentInstance();
const vCarousel = {
     // update: function (el,binding) {
            //   clearInterval(binding.value.that.$store.state[binding.value.timer]);
            //   binding.value.that.$store.state[binding.value.timer]= setInterval(()=>{
            //        el.scrollTop++
            //        if ((el.scrollTop+el.offsetHeight)>=el.scrollHeight) {
            //           el.scrollTop=0
            //         }
            //   },50)
            //   el.onmouseenter=function(){
            //       clearInterval(binding.value.that.$store.state[binding.value.timer])
            //   },
            //   el.onmouseleave=function(){
            //       clearInterval(binding.value.that.$store.state[binding.value.timer])
            //       binding.value.that.$store.state[binding.value.timer]= setInterval(()=>{
            //         if (el.scrollTop+el.offsetHeight>=el.scrollHeight) {
            //           el.scrollTop=0
            //         }
            //         el.scrollTop++
            //       },50)
            //   }
            // }
}
</script>

<style lang="scss">
.swiper-table-box {
  height: 100%;
  box-sizing: border-box;
  padding: 8px 20px 0 20px;
  .box-table-th {
    width: 100%;
    background: url('/image/index/th_bg.png') no-repeat;
    background-size: 100% 100%;
    // margin-top:4px;
    tr td {
      color: #999;
      font-weight: 700;
      text-align: center;
      line-height: 36px;
    }
  }

  .box-table-tr {
    width: 100%;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    table {
      width: 100%;
      table-layout: fixed;
    }
    tr {
      background: url('/image/index/tr_bg.png') no-repeat;
      background-size: 100% 100%;
      // margin-bottom:4px;
      height: 28px;
      line-height: 28px;
      // display: inline-block;
      // width: 100%;
      td {
        width: 20%;
        font-size: 14px;
        padding: 2% 0;
        color: #d2e7ff;
        text-align: center;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      &:hover td {
        background-color: rgba(47, 89, 155, 0.5);
      }
    }
    .bg-olor-tr {
      background: rgba(7, 52, 95, 0.5);
    }
  }
}

.box-tips {
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* 告警颜色 */
.alert_border {
  border-radius: 3px;
  padding: 0 8px;
  display: inline;
}

.alert_red {
  color: #f07f6e !important;
}

.alert_yellow {
  color: #df9428 !important;
}

.alert_blue {
  color: #29d9db !important;
}

.alert_green {
  color: #34c470 !important;
}

.alert_border_blue {
  border: 1px solid #29d9db !important;
}

.alert_border_red {
  border: 1px solid #d23f51 !important;
}

.alert_border_yellow {
  border: 1px solid #df9428 !important;
}

.alert_border_white {
  border: 1px solid #fff;
  padding: 1px 8px;
  border-radius: 5px;
}
</style>

https://blog.csdn.net/zxczero/article/details/125613915?spm=1001.2014.3001.5502