el-table中奇偶行背景色显示不同的颜色

时间:2020-03-24
本文章向大家介绍el-table中奇偶行背景色显示不同的颜色,主要包括el-table中奇偶行背景色显示不同的颜色使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
 1  <el-table
 2                 ref="singleTable"
 3                 :data="tableData"
 4                 highlight-current-row
 5                 @current-change="handleCurrentChange"
 6                 :header-cell-style="{background:'#ECF0FB'}"
 7                 :row-class-name="tableRowClassName"
 8                 style="width: 100%">
 9                 <el-table-column type="index" width="50"></el-table-column>
10                 <el-table-column prop="nickname"  label="昵称"></el-table-column>
11                 <el-table-column prop="emailAddress" label="邮箱地址"></el-table-column>
12                 <el-table-column prop="updateDate" label="创建时间"></el-table-column>
13                 <el-table-column label="操作" align="center">
14                     <template slot-scope="scope">
15                         <div v-if="scope.row.nickname==$store.state.basicInfo.xm">
16                             <el-button size="mini" class="disabled" disabled @click="transform({id:scope.$index,type:'edit'})">修改</el-button>
17                             <el-button size="mini" class="disabled" disabled @click="handleDelete(scope.$index)">删除</el-button>
18                         </div>
19                         <div v-else>
20                             <el-button size="mini" class="change"  @click="transform({id:scope.$index,type:'edit'})">修改</el-button>
21                             <el-button size="mini" class="delate"  @click="handleDelete(scope.$index)">删除</el-button>
22                         </div>
23                     </template>
24                 </el-table-column>
25             </el-table>
View Code

原文地址:https://www.cnblogs.com/gwkzb/p/12560215.html