HTML
<tbody (mouseout)="outTable()">
<tr *ngFor = "let option of GVDPdata;let i = index" [ngClass]="{'clickStyle':i==flag,'overStyle':i==flag2}" (click)="choose(option.templateId,option.templateTitle,i)" (mouseover)="gotoCover(i)" style="cursor:pointer;">
<td>{{i+1}}</td>
<td>{{option.templateTitle}}</td>
<td>{{option.descriiption}}</td>
<td>{{option.createUserName}}</td>
<td>{{option.createTime}}</td>
<td>{{option.updateUserName}}</td>
<td>{{option.lastUpdateDate}}</td>
</tr>
</tbody>
TS
// 表格鼠标移出事件
outTable() {
this.flag2 = -1;
}
//表格的行悬浮事件
gotoCover(value) {
this.flag2 = value;
if (this.flag2 == this.flag) {
this.flag2 = -1;
}
}
// 表格的行点击事件
choose(value, value1, value2) {
this.elementName3 = "";
this.elementId3 = "";
this.templateId = value;
this.gvdpTemplateDetail = value1;
this.flag = value2; //得到选中行号
this.flag2 = -1;
this.importDisabled = false;
this.getGVDPdata();
}
CSS
//点击样式
.clickStyle{
background-color: #186BA0;
color: white;
.blue{
color: white;
}
}
//悬浮样式
.overStyle{
background-color: rgba(220,220,220,0.5);
}
注释
根据点击或悬浮事件得到选中行号，根据行号用[ngClass]绑定样式，若点击样式和悬浮样式同时起作用，把flag2=-1,去掉悬浮样式。
