element table怎么条件渲染_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

<el-table :data="orderList" border style="width: 100%">
    <el-table-column prop="price" label="订单金额">
    </el-table-column>
    <el-table-column prop="createTime" label="下单日期">
    </el-table-column>
    <el-table-column prop="orderStatus" label="订单状态"> //1:已支付  2:未支付，现在渲染出是1，2
    </el-table-column>
</el-table>

###

<el-table-column prop="orderStatus" label="订单状态"> //1:已支付  2:未支付
<template slot-scope="scope">
{{ scope.row.orderStatus == 1 ? '已支付' : scope.row.orderStatus == 2 ? '未支付' : '-' }}
</template>
    </el-table-column>

###

<el-table v-if="orderList.length > 0" :data="orderList" border style="width: 100%">
    <el-table-column prop="price" label="订单金额">
    </el-table-column>
    <el-table-column prop="createTime" label="下单日期">
    </el-table-column>
    <el-table-column prop="orderStatus" label="订单状态"> //1:已支付  2:未支付，现在渲染出是1，2
    </el-table-column>
</el-table>

###

<el-table-column prop="orderStatus" label="订单状态" :formatter="formatter">
</el-table-column>

formatter(row, column, cellValue, index) {
    if(cellValue === 1) {
        return '已支付'
    }else if(cellValue === 2){
        return '未支付'
    }else {
        return  '-'
    }
}