vue中elementUi的分类添加不同的背景样式

我这里的要求是，不同的班级里，在同一张表格里，进行分类

例子：一班的背景颜色是红色 二班的背景颜色是蓝色等等

我这里的要求是随机颜色 让颜色不固定（因为不知道会有多少个班级）

话不多说附上代码

:cell-style=“finalCellStyle” 这个是el-table中绑定的属性

<el-dialog title="考试申请可添加考生"
          :visible.sync="dialogTableVisible">
          <el-table :data="gridData" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" :cell-style="finalCellStyle" style="color:#fff">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column property="id" label="编号" width="120"></el-table-column>
            <el-table-column property="name" label="姓名" width="80"></el-table-column>
            <el-table-column property="idenno" label="身份证号" width="120"></el-table-column>
            <el-table-column property="mobilePhone" label="联系方式" width="150"></el-table-column>
            <el-table-column property="state" :formatter="formatName" label="考试类型"></el-table-column>
            <el-table-column property="createDate" :formatter="formatTime" label="创建时间"></el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
           <el-button @click="removeStudent">取 消</el-button>
           <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
          </span>
        </el-dialog>

在生命周期的methods下写

this.gridData是我们渲染的数据， 然后生成随机颜色，这个时候我们利用到了"hasOwnProperty"，obj.hasOwnProperty(prop)
所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；

this.gridData.forEach(element => {
            /*随机产生十六进制的颜色值*/
                  let i = 0;
                  let str = "#";
                  let random = 0;
                  let aryNum = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
              
                  for(i = 0; i < 6; i++)
                  {
                    random = parseInt(Math.random() * 16);
              
                    str += aryNum[random];
                  }
            if (o.hasOwnProperty(element.className)){
              element.bgstyle = o[element.className];
            } else {
              o[element.className] = str;
              element.bgstyle = o[element.className];
            }
          });

row.bgstyle是我在拿到数据的时候插入进去的颜色样式（row是我们获取的每个对象）

finalCellStyle:function({row, column, rowIndex, columnIndex}){
        if (row['bgstyle'] != row['valueInit']) {
              return {
                  background: row.bgstyle
              }
          }else{
            return {
                  background: row.bgstyle
              }
          } 
      },

实现效果如下