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

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

先看效果图

 

开始上才艺：

跟着步骤走

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

   <el-table
           :data="tableData"
           style="width: 100%"
           border
           :cell-style="cellStyle"
           :header-cell-style="{'text-align':'center'}"
         >
           <el-table-column prop="number" label="Number"> </el-table-column>
           <el-table-column prop="userName" label="userName" width="180">
           </el-table-column>
           <el-table-column prop="department" label="date" width="180">
           </el-table-column>
           <el-table-column prop="nickName" label="nickName" width="180">
           </el-table-column>
           <el-table-column prop="phone" label="Phone"> 
           </el-table-column>
           <el-table-column prop="hostName" label="hostName"> </el-table-column>
           <el-table-column prop="deviceName" label="deviceName">
           </el-table-column>
           <el-table-column prop="email" label="email"> </el-table-column>
           <el-table-column prop="intranetAddress" label="intranetAddress">
           </el-table-column>
            <el-table-column prop="password" label="password">
           </el-table-column>
         </el-table>

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. 感觉不错可以给一个赞哦👍