[JavaScript知识库]vue-seamless-scroll element table表单滚动

<template>
  <div class="boxYj">
    <div class="earlyWarnin">
      <div class="topImg">
        <img src="../../assets/images/yj.png" alt="">
      </div>
      <div class="IconFont">
        <img src="../../assets/images/sys.png" alt="">
        <p>123</p>
      </div>
      <div>
<div class="table_main">
        <!-- <el-table
          :data="tableData"
          style="width: 95%"
          ref="table" 
          :row-style="getRowClass"
          :header-row-style="getRowClass"
          :header-cell-style="getRowClass">

          <el-table-column
            prop="typeName"
            label="事件类型"
            key="1"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column
            prop="supervisionName"
            key="2"
            show-overflow-tooltip
            label="监督模式">
          </el-table-column>

          <el-table-column
            prop="managementName"
            key="3"
            show-overflow-tooltip
            label="处置情况">
          </el-table-column>
        </el-table> -->

      <el-table :data="tableData" class="table">
        <el-table-column
          v-for="(item,index) in columns"
          :key="index+'i'"
          :label="item.label"
          :prop="item.prop"
        />
      </el-table> 


      <vue-seamless-scroll
        :data="tableData"
        class="seamless-warp"
        style="width: 100%"
        :class-option="defaultOption">
        <el-table :data="tableData" class="table_scroll">
          <el-table-column
            v-for="(item,index) in columns"
            :key="index+'i'"
            :label="item.label"
            :prop="item.prop"
        />
        </el-table>
      </vue-seamless-scroll>
 
      </div>
     </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: { 
    vueSeamlessScroll
  },
  computed: { 
     defaultOption () {
          return {
              step: 0.5, // 数值越大速度滚动越快
              limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.dataList.length
              hoverStop: true, // 是否开启鼠标悬停stop
              direction: 1, // 0向下 1向上 2向左 3向右
              openWatch: true, // 开启数据实时监控刷新dom
              singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
              singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
              waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
          }
      }
  },
    data () {
      return {  
      columns: [
          { prop: 'typeName', label: '事件类型', minWidth: '100', sort: true },
          { prop: 'supervisionName', label: '监督模式', minWidth: '180', sort: true },
          { prop: 'managementName', label: '处置情况', minWidth: '180', sort: true },
  
        ],
      

      tableData: [
        {
          typeName: "无人机预警",
          supervisionName: "行政检查",
          managementName: "处置中",
         
        },
        { 
          typeName: "人工巡查",
          supervisionName: "刑事检察",
          managementName: "待处置",
        },
      ],
    };
  },

 

  mounted(){},

  methods: {
      getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:transparent;color:#1CADF1; fontSize:0.16rem;text-align: center;";
    },
  },
}

</script>
<style scoped>
.boxYj{
    margin-top: .1rem;
}
.IconFont{
  padding: .1rem;
  display: flex;
  align-items: center;
  padding-bottom: 0;


}
.earlyWarnin{ 
  border: .01rem solid #045589;
  background: rgba(1, 11, 19, 0.36);

}
.IconFont img{
    width: .28rem;
    height: .24rem;
}
.IconFont p{
  font-size: .16rem;
  font-weight: bold;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: .16px;
  margin-left: .1rem;
}
.topImg{
  width: 2.5rem;
  height: .14rem;
}
.topImg img{
  position: absolute;
  width: 4.45rem;
  height: .14rem;

}
.IconFont h2{
    font-size: .2rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
    line-height: 20px;
    padding: 0 .1rem;
}

.explain p{
    display: flex;
    align-items: center;
    margin-left: 0.2rem;

}
.explain .explainleft{
  margin-right: .05rem;
  width: .03rem;
  height: .03rem;
  background: #fff;
  display: inline-block;
}


.explain p .explainright{
    font-size: .12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: .24rem;
}


/* 修改无限轮播----------------------------------- */

.plantsTitle{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 0.1rem;
}
.plantsTitle span{
    color: rgb(28, 173, 241);
    font-size: .12rem;
    text-align: center; 
    flex-shrink: 0;
    width:.5rem;
}

.page-example3{
    height: 1rem;
    overflow: hidden; 
}
 
 .ul-scoll  li{ 
    padding:0 .1rem ;
    line-height: .4rem;
    display: flex;
    justify-content: space-between; 
    align-items: center; 

 }

.ul-scoll  li span{ 
    flex-shrink: 0;
    width:.5rem;
    text-align: center;
    font-size: .12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF; 
}
 
 

>>> .cell.el-tooltip{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  font-size: 0.1rem;
  color: #fff; 
  -webkit-line-clamp: 1;
  text-align: center;
}
>>> .el-table th.el-table__cell>.cell{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  color: rgb(28, 173, 241);
  -webkit-line-clamp: 1;
}


>>> .tebale_card {
  color: #fff;
  background-color: transparent;
}
>>> .el-table,
>>> .el-table__expanded-cell {
  color: #fff;
  background-color: transparent;
}
>>> .el-table tr {
  background-color: transparent;
  color: #fff;
}
>>> .el-table .cell {
  line-height: 0.3rem;
  border-bottom: none;
}

>>> .el-table .el-table__cell {
  padding: 0;
}
>>> .el-table__header {
  line-height: 0.4rem;
  border-bottom: 0.01rem solid #3a7164; 
}
.table_main {
  /* margin-top: 0.2rem; */
  margin-left: 0.16rem;
}
>>> .el-table::before {
  height: 0;
}

>>> .el-tabs__nav-wrap::after {
  position: static !important;
}
>>> .el-table tbody tr:hover > td {
  background-color: rgba(1, 100, 204, 0.5) !important;
  cursor: pointer;
}
>>> .el-table td.el-table__cell,
>>> .el-table th.el-table__cell.is-leaf {
  border: none;
}

/* 滑动Y */
>>> .el-table th.el-table__cell {
    
    /* background: none; */
}
>>> .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: hidden;
}
/* 滑动X*/
>>> .el-table th.el-table__cell {
    background: none;
}
>>> .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: hidden;
}
>>>.el-table--scrollable-x .el-table__body-wrapper{
    overflow-x: hidden;
}









.table_main >>>.table .el-table__body-wrapper {
    display: none;
  }
   .seamless-warp {
    margin-top: 10px;
    height: 60px;
    overflow: hidden;
    }
    .seamless-warp >>>  .el-table  .el-table__header-wrapper {
      display: none;
 
  } 

</style>