vue-seamless-scroll +element封装表格滚动组件

项目中要使用单步停顿的表格样式 因此使用vue-seamless-scroll进行表格组件封装

实现结果：

1.安装插件

npm install vue-seamless-scroll --save

2.组件封装

<template>
  <div class="scrollTable">
    <!-- 表头 -->
    <el-row class="scrollTable-top">
        <div v-for="(key, i) in list" :key="'item' + i">
            <el-col :span="key.span" class="scrollTable-title"><span>{{key.name}}</span></el-col>
        </div>
    </el-row>
    <div v-if="tableData.length >0" @click="rowClick" class="scrollTable-warp">
      <vue-seamless-scroll
      :data="tableData"
      :class-option="classOption"
    >
      <ul class="scrollTable-warp-item">
        <li v-for="(item, index) in tableData" :key="index">
          <el-row>
            <div v-for="(key, i) in list" :key="'key'+i">
                <el-col :span="key.span" class="scrollTable-warp-item-value">
                    <span v-if="key.type == 'index'">{{index + 1}}</span>
                    <span v-else-if="key.slot">
                        <slot :name="key.slot" :row="item"></slot>
                    </span>
                    <span v-else :title="item[key.value] ? item[key.value]: '--'">{{item[key.value] ? item[key.value]: '--'}}</span>
                </el-col>
            </div>
          </el-row>
        </li>
      </ul>
    </vue-seamless-scroll>
    </div>
    
    <div v-else class="scrollTable-warp" style="text-align: center; margin-top: 50px;">
        暂无数据
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        [];
      },
    },
    list: {
      type: Array,
      default: () => {
        [];
      },
    },
    classOption: {
      type: Object,
      default: () => {
        return { 
            singleHeight: 46,
            limitMoveNum: 3,
            waitTime: 1500,
        };
      },
    },
  },
  methods: {
    rowClick(e){
      const item = e.target.closest(".scrollTable-warp-item"); // 定位元素
      if (item) { // 是否是滚动组件的某一行/列
        const { index } = item.dataset;
        this.$emit('rowClick', this.tableData[index])
      }
        
    }
  }
};
</script>
<style lang="scss" scoped>
.scrollTable{
    color: #fff;
    width: 100%;
    height: 100%;
    &-top{
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: rgba(100, 177, 255, 0.1);
        border: solid 1px rgba(100, 177, 255, 0.3);
    }
    &-title{
        text-align: center;
    }
    &-warp {
        height: calc(100% - 40px);
        width: 100%;
        margin: 0 auto;
        overflow: auto;
        ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            li,
            a {
                width: 100%;
                height: 46px;
                line-height: 46px;
                font-size: 15px;
                background: url('~@/assets/statistic/tableBack.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                &:hover {
                border: 1px solid #00b4ff;
                background: transparent;
                box-shadow: 0 0 8px #00b4ff inset;
                }
            }
            
        }
        &-item{
            &-value{
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
/deep/.el-col{
    margin-bottom: 0px !important;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: none;
  }
</style>

表格背景图片：

3.使用

<template>
    <div class="instructionList">
        <div class="common-map-index-part-content"  v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0)" element-loading-text="加载中，请稍后...">
            <scrollTable :tableData="tableData" :list="list" @rowClick="handleDetail">
                <template slot-scope="scope" slot="involvedCategory">
                    <div v-if="scope.row.involvedCategory &&scope.row.involvedCategory != null " style="padding-top: 8px;height: 46px">
                            <span v-if="scope.row.involvedCategory.indexOf('走私') != -1">
                                <img src="@/assets/statistic/zousi.png" alt="" style="width:28px;height:28px;margin-right:5px;">
                            </span>
                        </div>
                </template>
            </scrollTable>
        </div>
    </div>
</template>
<script>
import {getPersonList} from '@/api/statistic'
export default {
    name: 'instructionList',
    data () {
        return {
            isLoading: false,
            req: {
                name: '',
                current: 1,
                size: 10,
            },
            tableData: [],
            list: [
                {
                    name: '序号',
                    span: 2,
                    type: 'index',
                },
                {
                    name: '姓名',
                    span: 4,
                    value: 'name',
                },
                {
                    name: '身份证号',
                    span: 6,
                    value: 'idCard',
                },
                {
                    name: '手机号码',
                    span: 4,
                    value: 'phone',
                },
                {
                    name: '涉案类型',
                    span: 8,
                    value: 'involvedCategory',
                    slot: 'involvedCategory',
                },
            ]
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        getData () {
            this.isLoading = true
            getPersonList(this.req).then(({data})=>{
                if(data.code==0) {
                    this.tableData = data.data.records
                    this.isLoading = false
                }
            })
        },
        handleDetail (item) {
            this.isShowDetailModal = true
            this.detailIdCard = item.idCard
        }
    }
}
</script>