使用vue渲染表格隔行变色

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

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

具体要求:

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

下面来看主要代码:

<!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>

上面这是主要代码部分,具体思路是:

  1. 先实例化一个vue变量tab,在data中我定义了一个num为6,表示制作一个6x6的数据表格,在tr中使用v-for指令遍历num,得到6行,对于每一行在td中使用v-for指令遍历num,得到6列,就得到了6x6的数据表格了。
  2. 写下拉菜单,在data中写list属性,我用的是数组里面套对象的方法,写了5组颜色。select标签添加option标签,给该标签添加一个value属性,值为当前索引,在option标签内使用v-for指令遍历list,将颜色数据显示在下拉菜单中,下拉菜单就写好了。
  3. 在data中写一个color属性,值为list数组的第一项,color属性用来表示初始化显示的颜色。将tr的样式与color属性进行一个绑定,接下来主要通过改变color属性的值就能实现改变tr行的颜色了。在tr标签中添加:class=‘i%2==0?color.color2:color.color1’,这里用的是三元表达式,其中i表示当前tr所在行的索引,如果是偶数,显示color属性的color2的值,否则显示color属性的color1的值。
  4. 既然tr的颜色已经与color属性绑定,那么接下来就要通过下拉菜单来改变color属性的值就可以了。在data中定义一个initColor属性,值为0,默认显示下拉菜单第一行的颜色,在select标签使用v-model="initColor"与initColor双向绑定,@change='foo(initColor)'为定义的方法,每当下拉菜单改变时触发,在tab实例中的methods属性中写foo方法,改变color属性的两个值。这样通过下拉菜单改变颜色功能就写好了。
  5. 给表格添加鼠标滑过样式,在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。

下面来看看运行结果:

默认显示第一项的颜色。
使用vue渲染表格隔行变色_第1张图片
通过下拉菜单选择其他颜色。
使用vue渲染表格隔行变色_第2张图片
鼠标滑过第二行第一列改变其不透明度。
使用vue渲染表格隔行变色_第3张图片
这样一个表格的简单渲染就完成啦!

你可能感兴趣的:(使用vue渲染表格隔行变色)