关于elementUI的table组件展示不同颜色的背景色

<el-table :data="dataArray" border="true" stripe="true" :cell-class-name="cellStyle">

<el-table-column align="center" prop="cityName" label="城市名称" width="100"></el-table-column>

<template v-for="(item,index) in secondArrayLength">

<el-table-column

align="center"

style="background:red"

:prop="dataArray.cityData"

:label="item"

:key="index"

width="60"

>

<template slot-scope="scope">{{scope.row.cityData[0].parameterData[index].value}}</template>

</el-table-column>

</template>

</el-table>

返回数据如下：

  "data": [

        {

            "cityName": "济南",

            "cityCode": "370100",

            "cityData": [

                {

                    "parameterId": "10000",

                    "parameterName": "烷烃（全VOCs）"，

                    "parameterColor": [   

                       { level: "3", value: 113 },

                      { level: "4", value: 152 },               

                    ],                   

                }

            ]

        },

根据level设置不同颜色，

cellStyle({ row, column, rowIndex, columnIndex }) {

//把每一行的索引放进row

if (columnIndex == 0) {

return;

}

// console.log(row);

let level = row.cityData[0].parameterData[columnIndex - 1].level;

return "colorcal" + level;

}

css如下：

<style>

.colorcal1 {

background: #4bdb57 !important;

color: #ffffff;

}

.colorcal2 {

background: #eccd00 !important;

}

.colorcal3 {

background: #ff7e00 !important;

color: #ffffff;

}

.colorcal4 {

background: #e63c1b !important;

color: #ffffff;

}

.colorcal5 {

background: #b60064 !important;

color: #ffffff;

}

.colorcal6 {

background: #7e0123 !important;

color: #ffffff;

}

</style>