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

Myth丶恋晨 2023-05-31 02:53 50阅读 0赞

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

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

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

**话不多说附上代码**

> :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
                  }
              } 
          },

**实现效果如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyODU3NQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyODU3NQ_size_16_color_FFFFFF_t_70]: /images/20230531/63816a59e9664b8caeea8476206cdd48.png