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

sunlizhen

于 2020-12-01 13:22:46 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/sunlizhen/article/details/110429045

vue 专栏收录该内容

157 篇文章

订阅专栏

本文展示了如何在Vue.js中使用v-if指令动态地根据数据状态显示el-table中的不同按钮。根据订单状态（10：待提交，20：待审核，30：通过，40：拒绝）来决定显示警告、成功或驳回操作的按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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