element table怎么条件渲染

Question

<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>

Answer 1

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

Answer 2

<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>

Answer 3

<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  '-'
    }
}