cell-class-name在vue组件使用不生效问题

cell-class-name常规使用

使用el-table快速开发的时候遇到了cell-class-name在vue组件使用不生效问题，百度了很多才找到解决方法，简单记录一下。

// html 结构精简
<el-table
   stripe
   :data="tableData"
   style="width: 100%"
   :cell-class-name="colorStyle"
>
/* ex-table-column是el-table-column的衍生，解决当每一列单元格内容过多自动换行的问题。二者在el-table中可以混用。
  * 想了解ex-table-column可以看这个链接：https://www.npmjs.com/package/ex-table-column  */
   <ex-table-column
      :autoFit='true'
      :fitHeader='true'
      prop="firstVisit"
      label="首次访问时间">
   </ex-table-column>
   <ex-table-column
      :autoFit='true'
      :fitHeader='true'
      prop="newUsers"
      label="新增用户">
   </ex-table-column>
   <ex-table-column
      :autoFit='true'
      :fitHeader='true'
      prop="nextDay"
      label="次日">
   </ex-table-column>
   <ex-table-column
      :autoFit='true'
      :fitHeader='true'
      prop="threeDaysLater"
      label="3日后">
   </ex-table-column>
   <ex-table-column
      :autoFit='true'
      :fitHeader='true'
      prop="fourDaysLater"
      label="4日后">
   </ex-table-column>          
</el-table>
// script 数据精简
data(){
    return {
    tableData: [{
    firstVisit: '2021-05-14',
               newUsers: '49',
               nextDay: '2.04%',
               threeDaysLater: '4.08%',
               fourDaysLater: '4.08%',
               },{
               firstVisit: '2021-05-14',
               newUsers: '49',
               nextDay: '2.04%',
               threeDaysLater: '4.08%',
               fourDaysLater: '4.08%',
               }]
  }
},
methods: {
	colorStyle({row,column,rowIndex,columnIndex}){
                if(columnIndex == 2){
                    if(rowIndex ==2){
                        return 'cell-grey';// 返回样式类名
                    }

                }
}
// 样式
<style scope>
// 组件私有样式
</style>
<style>
// 一般组件样式需要加scope防止组件间样式污染，但是在这里不能加scope，需要是全局样式才能使cell-grey生效。
    .cell-grey {
        background: #f2f2f2!important;
    }
</style>