vue之el-table某一列设置样式

最新推荐文章于 2025-04-09 16:08:29 发布

小郑！

最新推荐文章于 2025-04-09 16:08:29 发布

阅读量4.8k

点赞数 3

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45479398/article/details/127429888

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

vue之el-table某一列设置样式

方法一：

在methods里面设置

<el-table :cell-style="setRowStyle">
  .........
</el-table>

setRowStyle(row, column, rowIndex, columnIndex) {
   if(row.status=== "1"){
       return 'color: green' 
   }else{
       return 'color: red' 
   }
}

方法二

通过判断，也可以用三元运算符

<el-table-column prop="status" label="状态">
    <template scope="scope">
        <span v-if="scope.row.status==='1'" style="color: green">成功</span>
        <span v-else-if="scope.row.status==='2'">失败</span>
        <span v-else style="color: red">未知</span>
    </template>
</el-table-column>