ElementUI中el-table组件自定义设置单元格样式

最近遇到一个需求，后台返回的数据中有一个错误的数组，我们需要给错误数组中的数据用自定义样式用红框给框起来，且看如下效果！！！

先看效果图

 

开始上才艺：

跟着步骤走

1. 看elementUI官网解释，如果设置单元格需要cell-style属性
2.  引入element的el-table组件，并且引入axios（数据是后台给的，所以要用到axios）
3.  看代码：

4.  在methods里边使用我们的方法

   methods: {
       cellStyle({row,column}) {
         // console.log(column)
         if(row.errTitle.includes(column.label)){
            return "border:1px solid red;text-align:center"    
         }else{
           return "color:green;text-align:center"  
         }
       },
       Getlist() {
         axios.get("/user/list").then((res) => {
           this.tableData = res.data.data.list[0].records;
         });
       },
     },

5.  重点就是cellStyle的判断，然后return出我们想要的样式就可追加上啦
6. 感觉不错可以给一个赞哦