使用vue渲染表格隔行变色

最新推荐文章于 2025-05-23 10:51:42 发布

原创最新推荐文章于 2025-05-23 10:51:42 发布 · 5.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5

本文详细介绍如何使用Vue框架渲染一个带有隔行变色、下拉菜单选取颜色和鼠标滑过效果的表格，涵盖代码实现和运行结果展示。

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

使用vue框架，渲染一个表格。

最近刚开始学习vue框架，想用简单代码实现一个表格的渲染，不得不说，vue框架确实很强大，接触上了就会爱不释手。

具体要求：

表格数据要隔行变色。
可以通过下拉菜单选取颜色。
给表格添加鼠标滑过效果。

下面来看主要代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格隔行变色</title>
		<script type="text/javascript" src="../vue.js"></script>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			#box{
				width:650px;
				height:260px;
				border:1px solid blue;
				border-radius:5px;
				padding:30px 10px 10px 10px;
				margin-left:20px;
				text-align:center;
			}
			#cont{
				width:170px;
				font-size:16px;
			}
			#tab{
				margin:0 auto;
				margin-top:30px;
				}
			p{
				text-align:center;
				padding:5px;
			}
			span{
				display:inline-block;
				width:5px;
			}
			td{
				width:100px;
				text-align:center;
				font-size:16px;
			}
			.skyblue{
				background: skyblue;
			}
			.yellow{
				background: yellow;
			}
			.blue{
				background: blue;
			}
			.pink{
				background: pink;
			}
			.darkblue{
				background: darkblue;
			}
			.gray{
				background: gray;
			}
		</style>
	</head>

上面这是表格的一些样式修饰，简单设置了单元格宽度和表格颜色的样式。

<body>
		<div id="box">
			<p>表格隔行变色</p>
			<select id='cont' @change='foo(initColor)' v-model="initColor">
				<option v-for='(item,index) in list' :value='index'>{{item.color1}}&&{{item.color2}}</option>
			</select>
			<table border="" cellspacing="" cellpadding="" id='tab'>
				<tr v-for='i in num' :class='i%2==0?color.color2:color.color1'>
					<td v-for='j in num' :style="{opacity:Tditem==j&&Tritem==i?0.3:1}" @mouseover="change(i,j)" @mouseout="removechange(i,j)">第{{j}}格</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var tab = new Vue({
				el:'#box',
				data:{
					num:6,
					Tritem:0,
					Tditem:0,
					initColor:0,
					color:{color1:'skyblue',color2:'yellow'},
					list:[
					{color1:'skyblue',color2:'yellow'},{color1:'yellow',color2:'blue'},
					{color1:'pink',color2:'darkblue'},{color1:'gray',color2:'pink'},
					{color1:'skyblue',color2:'darkblue'}
					]
				},
				methods:{
					foo(item){
						this.color.color1=this.list[item].color1;
						this.color.color2=this.list[item].color2;
					},
					change(i,j){
						this.Tditem = j;
						this.Tritem = i;
					},
					removechange(i,j){
						this.Tditem = 0;
						this.Tritem = 0;
					}
				}
			})
		</script>
	</body>
</html>

上面这是主要代码部分，具体思路是：

先实例化一个vue变量tab，在data中我定义了一个num为6，表示制作一个6x6的数据表格，在tr中使用v-for指令遍历num，得到6行，对于每一行在td中使用v-for指令遍历num，得到6列，就得到了6x6的数据表格了。
写下拉菜单，在data中写list属性，我用的是数组里面套对象的方法，写了5组颜色。select标签添加option标签，给该标签添加一个value属性，值为当前索引，在option标签内使用v-for指令遍历list，将颜色数据显示在下拉菜单中，下拉菜单就写好了。
在data中写一个color属性，值为list数组的第一项，color属性用来表示初始化显示的颜色。将tr的样式与color属性进行一个绑定，接下来主要通过改变color属性的值就能实现改变tr行的颜色了。在tr标签中添加:class=‘i%2==0?color.color2:color.color1’，这里用的是三元表达式，其中i表示当前tr所在行的索引，如果是偶数，显示color属性的color2的值，否则显示color属性的color1的值。
既然tr的颜色已经与color属性绑定，那么接下来就要通过下拉菜单来改变color属性的值就可以了。在data中定义一个initColor属性，值为0，默认显示下拉菜单第一行的颜色，在select标签使用v-model="initColor"与initColor双向绑定，@change='foo(initColor)'为定义的方法，每当下拉菜单改变时触发，在tab实例中的methods属性中写foo方法，改变color属性的两个值。这样通过下拉菜单改变颜色功能就写好了。
给表格添加鼠标滑过样式，在data中定义Tritem和Tditem两个属性，属性值分别表示当前鼠标所在表格的行和列，初始值为0，在td中添加鼠标划入事件@mouseover=“change(i,j)”，将该td的行和列作为参数传递，在methods中写change方法，然后改变data中的Triten和Tditem值就行了，最后给td添加样式:style="{opacity:Tditem== j && Tritem== i?0.3:1}"，我在这里改变的是表格的透明度，当Tritem和Tditem的值为当前td的i和j时，说明选中，然后降低不透明度。鼠标移出事件@mouseout="removechange(i,j)"是将Tritem和Tditem改为0。

下面来看看运行结果：

默认显示第一项的颜色。
运行结果
通过下拉菜单选择其他颜色。
换颜色
鼠标滑过第二行第一列改变其不透明度。
改变不透明度
这样一个表格的简单渲染就完成啦！