<table class="t">
<thead>
<tr style="height: 0.375rem">
<th style="width: 100px" class="a">院区名称</th>
<th style="width: 100px" class="a">设备名称</th>
<th style="width: 100px" class="a">维修次数</th>
</tr>
</thead>
<tr v-for="(item, index) in devTypes" :key="index">
<td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.id }}</td>
</tr>
</table>
定义数据
devTypes:[
{id:'1',name:'小李',age:'10'},
{id:'2',name:'小李1',age:'10'},
{id:'3',name:'小李3',age:'12'},
{id:'4',name:'小李4',age:'12'},
],
css部分
.t tr:nth-child(odd) {
background-color: blue;
color: white;
}
/* 偶数行样式 */
.t tr:nth-child(even) {
background-color: red;
color: yellow;
}
原生table实现奇数和偶数的样式不一样
最新推荐文章于 2024-08-13 11:12:51 发布