v-if判断el-table中按钮的显示与隐藏

最新推荐文章于 2023-08-08 14:19:47 发布

small面包

最新推荐文章于 2023-08-08 14:19:47 发布

阅读量7.6k

点赞数 2

分类专栏： v-if v-table 显示隐藏文章标签： vue

本文链接：https://blog.csdn.net/weixin_44986077/article/details/107401435

版权

v-if 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

v-table

1 篇文章 0 订阅

订阅专栏

显示隐藏

1 篇文章 0 订阅

订阅专栏

一般情况下前端在做表格是时候会有状态的显示，下面是我的一个小demo
在这里插入图片描述
状态是根据后台返回值显示不同的按钮
下面是代码

 <el-table-column
        prop="orderStatus"
        label="状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.orderStatus == 10"
            class="notop"
            type="warning"
            size="mini"
          >待提交</el-button>
          <el-button
            v-else-if="scope.row.orderStatus == 20"
            class="notop"
            type="warning"
            size="mini"
          >待审核</el-button>
          <el-button
            v-else-if="scope.row.orderStatus == 30"
            class="notop"
            type="success"
            size="mini"
          >通过</el-button>
          <el-button
            v-else-if="scope.row.orderStatus == 40"
            class="notop"
            type="warning"
            size="mini"
          >拒绝</el-button>
          <el-button
            v-else
            class="notop"
            type="warning"
            size="mini"
          >驳回</el-button>
        </template>
      </el-table-column>