Vue无线滚动表格 vue-seamless-scroll（表头固定，列表数据滚动）

首先安装vue-seamless-scroll插件

step1安装

yarn add vue-seamless-scroll --save
或者 npm install vue-seamless-scroll --save

step2在mian.js文件中引入

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

step3文件中使用

<template>
	<div>
    	<table>
    		<!-- 设置列宽 -->
	    	<colgroup>
	    		<col width="50%">
	    		<col width="25%">
	    		<col/>
	    	</colgroup>
	    	<thead>
	    	<th>姓名</th>
	    	<th>年龄</th>
	    	<th>电话</th>
	    	</thead>
    	</table>
    	<vue-seamless-scroll :data="testArray" :class-option="optionHover" class="seamless-warp"
                      		 v-if="testArray[0]">
        	<ul>
	        	<li v-for="item in testArray" class="liStyle">
		        	<span class="title1 text_align">{{ item.name }}</span>
		        	<span class="title2 text_align">{{ item.age }}</span>
		        	<span class="title2 text_align">{{ item.phone }}</span>
	        	</li>
        	</ul>
        </vue-seamless-scroll>
  </div>
</template>

js代码：

data(){
	return {
		testArray:[
	        {name:'刘明明',age:14,phone:'15876512321'},
	        {name:'王五五',age:15,phone:'15876512321'},
	        {name:'张萌萌',age:23,phone:'15876512321'},
	        {name:'刘浩',age:20,phone:'15876512321'},
	        {name:'刘佳',age:21,phone:'15876512321'},
	        {name:'王佳',age:16,phone:'15876512321'},
	        {name:'赵子龙',age:19,phone:'15876512321'}
      ],
	}
},
computed: {
	//滚动表格的配置项
	optionHover() {
	  return {
	    hoverStop: true, // 是否开启鼠标悬停stop
	    direction: 1, // 0向下 1向上 2向左 3向右
	    step: 1,// 数值越大速度滚动越快
	    openWatch: true, // 开启数据实时监控刷新dom
	    // limitMoveNum: 5, //开始滚动的数据量
	    // singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
	    // singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
	    // waitTime: 1000 //单步运动停止的时间(默认值1000ms)
	  }
	}
},

css样式

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  /*font-weight: normal;*/
}

ul {
  list-style: none;
}

table {
      width: 100%;
      text-align: center;
}

th {
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	background-color: rgba(180, 181, 198, 0.1);
}

.seamless-warp {
	height: 150px;
	overflow: hidden;
		.liStyle {
			height: 30px;
			line-height: 30px;
			width: 100%;
			display: flex; //设置flex布局，否则span标签无法设置宽度
			  //设置宽度与表头列宽一致
			  .title1 { width: 50%; }
				
			  .title2 { width: 25%; }
			  
			  .text_align { text-align: center; }
		}
}
</style>