image.png

1. vue视图html,关键changeCellStyle

            <!-- 表格 -->
            <div class="hoursTable" >
                <el-table
                :data="hoursTableData"
                :cell-style="changeCellStyle" 
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="关键词"
                  header-align="left"
                  width="130px"
                  >
                  <template slot-scope="scope">
                        <span><i></i>item-{{scope.$index}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排名"  align="center">
                    <el-table-column
                      prop="province"
                      label="省份"
                      align="center"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="city"
                      label="市区"
                      align="center"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="地址"
                      align="center"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="zip"
                      label="邮编"
                      align="center"
                     >
                    </el-table-column>
                  </el-table-column>
              </el-table>
              </div>

2. 样式-css

.hoursTable{
  /deep/ .el-table thead.is-group th.el-table__cell{
    background: none;
  }
  /deep/ .el-table thead.is-group tr:nth-child(1)>th:nth-child(1).el-table__cell{
    background:#F6F6F6;
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #787878;
  }
  /deep/ .el-table td:nth-child(1).el-table__cell{
    background:#F6F6F6;
    padding: 15px 5px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #787878;
    i{
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #3481FD;
      margin-right: 5px;
    }
  }
  
}

2. js，写再methods: {}里面

   changeCellStyle(row) {
      if (row.columnIndex===0) {
       let footerDom=document.querySelectorAll(`.${row.column.id} i`)
        if (footerDom && footerDom.length) {
                    for (const n of footerDom) {
                        n.style.background = "rgb(" + Math.round(Math.random() * 235) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')'
                    }
                    
                }
       
      }
      
    },