使用vue渲染表格隔行变色
使用vue框架,渲染一个表格。要求:1.表格隔行变色。2并能够通过下拉菜单选择颜色
·
使用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。
下面来看看运行结果:
默认显示第一项的颜色。
通过下拉菜单选择其他颜色。
鼠标滑过第二行第一列改变其不透明度。
这样一个表格的简单渲染就完成啦!
更多推荐
已为社区贡献2条内容
所有评论(0)