美文网首页
vue之el-table某一列设置样式

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

作者: xintop | 来源:发表于2021-08-02 13:26 被阅读0次

    方法一

    在el-table设置属性cell-style方法
    <el-table
    :cell-style="setRowStyle">
      .........
    </el-table>
    

    在method中设置

    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>
    

    相关文章

      网友评论

          本文标题:vue之el-table某一列设置样式

          本文链接:https://www.haomeiwen.com/subject/qeqevltx.html