Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白

最主要就是用到属性的绑定 :class<!DOCTYPE html><html><head><meta charset="GBK"><title></title><style>* {margin: 0px;padding: 0px;}body {.

编程界明世隐

4590人浏览 · 2020-12-10 16:25:28

编程界明世隐 · 2020-12-10 16:25:28 发布

最主要就是用到属性的绑定 :class （动态绑定多个class）

:class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',selectedId==k?'trselected':'']"

(k+1)%2==1?'trclock':'' 当前行是奇数行则使用 trclock样式；

curId==k?'trhover':'' 当curId==k时 trhover样式添加进当前TR，通过mouseenter mouseleave 两个函数来控制curId的值；

selectedId==k?'trselected':'' 当selectedId==k时 trselected 样式添加进当前TR，通过点击事件select(k)来设置selectedId的值；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="GBK">
        <title></title>
        <style>
        	* {
		        margin: 0px;
		        padding: 0px;
			}
        	body {
		        margin: 20px;
		        font-family: Arial, "宋体";
		        font-size: 12px;
		        line-height: 20px;
		        color: #333333;
			}
			.table{
			    font-size: 13px;
				word-break:break-all;
				cursor: default;
				BORDER: #FFFFFF 1px solid;
				background-color:#FFFFFF;
				border-collapse:collapse ;
				border-Color:#E2B801;	
			}
			.tdprimary{
		        padding: 2px;
		        width: 100px;
			}
			.trclock{
				background-color: #ECF5FF;
			}
			.trhover{
				background-color: #C2C2C2;
			}
			.trselected{
				background-color: #62B0FF
			}
        </style>
    </head>
    <body>
        <div id="app">
        	<table border="1" cellspacing="1" cellpadding="4" bordercolorlight=#CCCCCC bordercolordark=#FFFFFF class="table" pcolor='#FFFFE5'>
		        <tr :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',selectedId==k?'trselected':'']"
		        	@mouseenter="enter(k)"
                  	@mouseleave="leave()"
                  	@click="select(k)"
                    v-for="(item,k) in list" :key="k">
                    
	                <td class="tdprimary" v-for="(i,j) in item" :key="j">{{i}}</td>
		        </tr>
		     </table>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
       var vm = new Vue({
            el: '#app',
            data: {
            	curId:null,
            	selectedId:null,
            	list:[
					[11,12,13,14,15],     
					[21,22,23,24,25], 
					[31,32,33,34,35], 
					[41,42,43,44,45], 
					[51,52,53,54,55],
					[61,62,63,64,65]         	
            	]
            },
            methods:{
            	enter(id){
			      this.curId = id;
			    },
			    leave(){
			      this.curId =null;
			    },
			    select(id){
			      this.selectedId=id;
			    }
            }
        });
        
    </script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^