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

最新推荐文章于 2024-12-11 14:26:47 发布

原创最新推荐文章于 2024-12-11 14:26:47 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

157 篇文章

订阅专栏

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

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