<el-table :data="tableData" :header-cell-style="{background:'#011550',color:'#5c8aaf'}" :row-class-name="toggleRowClassName" align="center"
style="width: 376px" max-height="355px">
<el-table-column label="学院" prop="name" width="180"/>
<el-table-column label="实训室数量" prop="address"/>
<el-table-column label="占比" prop="address">
<template #default="scope">
<div class="rate">
{{ scope.row.address }}
</div>
</template>
</el-table-column>
</el-table>
------------------------------------------------------------
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-03',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No',
},
],
-----------------------------------------------------标签:elementUI,05,No,Tom,address,date,table,2016,斑马 From: https://www.cnblogs.com/connie256/p/17011778.html
toggleRowClassName({row, rowIndex}) {
if (rowIndex % 2 == 1) {
return 'deep_row'
} else {
return 'light_row'
}
}