vue-seamless-scroll实现滚动表格

yarn安装

yarn add vue3-seamless-scroll

使用(全局注册)

  // **main.js**
  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');

单个.vue文件局部注册

<script>
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
  export default {
      components: { Vue3SeamlessScroll }
  }
</script>

具体组件使用例子

<template>
  <div class="my-table">
    <div class="table_th">
      <span>设备编号</span>
      <span>设备位置</span>
      <span>设备状态</span>
      <span>设备类型</span>
    </div>
    <vue3-seamless-scroll
        class="table-list"
        :list="tableData"
        :step="0.5"
        :hover="true"
    >
      <div class="table_td"
           v-for="item in tableData"
           :key="item.num"
      >
        <span>{{item.num}}</span>
        <span>{{item.place}}</span>
        <span :class="item.status === '正常' ? 'green-color':'red-color'">{{item.status}}</span>
        <span>{{item.type}}</span>
      </div>
    </vue3-seamless-scroll>
  </div>

</template>

<script>
import { reactive} from "vue";

export default {
  name: "table",

  setup(){
    const  state = reactive({
      tableData :[
        {num:1,place:'东门',status:'正常',type:'人脸检测'},
        {num:1,place:'东门',status:'异常',type:'人脸检测'},
        {num:1,place:'东门',status:'异常',type:'人脸检测'},
        {num:1,place:'东门',status:'异常',type:'人脸检测'},
        {num:1,place:'东门',status:'正常',type:'人脸检测'},
        {num:1,place:'东门',status:'异常',type:'人脸检测'},
        {num:1,place:'东门',status:'正常',type:'人脸检测'},
        {num:1,place:'东门',status:'正常',type:'人脸检测'},
        {num:1,place:'东门',status:'正常',type:'人脸检测'},
        {num:1,place:'东门',status:'正常',type:'人脸检测'},
        {num:1,place:'东门',status:'正常',type:'人脸检测'},
      ]
    })
    return{...state}
  }
}
</script>

<style lang="scss">

.my-table{
  border: 1px solid red;
  margin: 20px;

  .table_th{
    display: flex;
    justify-content: space-evenly;
    span{
      width: 60px;
      margin: 10px;
    }
  }
}
.table-list{
    height: 200px;
    width: 500px;
    overflow: hidden;
.table_td{
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  span{
    margin: 10px;
    width: 60px;
  }
  .green-color{
    color: green;
  }
  .red-color{
    color: red;
  }
}
}

</style>