vue的表格实现轮播表

最新推荐文章于 2025-03-19 12:09:23 发布

沓然

最新推荐文章于 2025-03-19 12:09:23 发布

阅读量6.2k

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43005654/article/details/123245145

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue.js的El-Table组件中创建一个自动轮播表格数据的效果。通过设置定时器，将表格数据数组的第一项移到末尾并删除第一项，从而实现数据的滚动展示。虽然目前实现的是瞬间切换，但文中提到若要实现平滑过渡则较为复杂，可能在El-Table上存在一些挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在el-table表格中实现轮播表，每一列数据上向自动滚动？

一、思路：我们只需要获取到表格的数据数组，然后设置一个定时器即可，每秒将第一个元素添加至数组末尾，在将第一位元素删除。
二、代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery.min.js"></script>
		<script src="../Echarts/vue.min.js"></script>
		<script src="../Echarts/element.js"></script>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
	</head>

	<body>
		<div id="box">
			<el-table :data="tableData" style="width: 100%;height:300px;">
				<el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<!--<el-table-column prop="name" label="姓名" width="180">-->
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
		</div>

		<script>
			new Vue({
				el: '#box',
				data: {
//					animate: false,
					tableData: [{
						date: '1',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}, {
						date: '2',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1517 弄'
					}, {
						date: '3',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1519 弄'
					}, {
						date: '4',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '5',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '6',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '7',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '8',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '9',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '10',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '11',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}, {
						date: '12',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1516 弄'
					}]
				},
				created() {
					setInterval(this.scroll, 1000)
				},
				methods: {
					scroll(){
					      let el = document.querySelector('.el-table__body-wrapper')
					      el.addClassName = 'anim'
					       setTimeout(()=>{ 
					              // console.log(this.items[0])
					              this.tableData.push(this.tableData[0]);  // 将数组的第一个元素添加到数组的
					              this.tableData.shift();    //删除数组的第一个元素
					       },1000)
					    }
				}

			})
		</script>
		<style scoped>
		.anim{
		  animation: mymove 1s linear;
		}
		 
		@keyframes mymove
		{
		from {
		  transform: translateY(0px) ;
		}
		to {
		  transform: translateY(-20px) ;
		}
		}
		</style>

	</body>

</html>