zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

Vue 如何 操作 通过 不同 运算符 展示 三元
2023-09-27 14:26:41 时间

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

三目运算 + 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
            >

      <el-button
                type="danger"
                size="mini"
                slot="reference"
                v-if="
                  scope.row.status === '待付款' || scope.row.status === '完成'
                    ? true
                    : false
                "
                >删除</el-button
              >

2、数据库存储字段

在这里插入图片描述

3、后语

学无止境。。。。。。