Vue中如何通过三元运算符来展示不同的操作

有的时候需要根据不同的状态、进行不同的操作。比如：订单，未付款状态，此时的操作有付款。待发货状态、用户可以申请退款操作。退款操作肯定不能在付款之前展示给用户。这个时候就可以可以三目运算。表达式？正确：错误；

三目运算 + v-if 就可以实现

效果

1、用户订单

---

2、管理员订单

1、源码

通过获取订单的状态，然后进行判断是否展示该按钮。我这里数据库存储的是int类型的status，在前端进行了字符串替换。

     <el-button
              type="warning"
              size="mini"
              v-if="scope.row.status === '待发货' ? true : false"
              @click="onRefund(scope.$index, scope.row)"
              >退款el-button
            >
1
2
3
4
5
6
7

---

      <el-button
                type="danger"
                size="mini"
                slot="reference"
                v-if="
                  scope.row.status === '待付款' || scope.row.status === '完成'
                    ? true
                    : false
                "
                >删除el-button
              >
1
2
3
4
5
6
7
8
9
10
11

2、数据库存储字段

3、后语

学无止境。。。。。。