Vue v-if 动态控制el-button 显示

Posted 2021-08-28 在奋斗的大道

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue v-if 动态控制el-button 显示相关的知识，希望对你有一定的参考价值。

一般情况下前端在做表格是时候会有需要动态渲染按钮，下面是我实现动态渲染按钮案例实现

根据后台返回值显示不同的按钮

vue 代码片段：

 <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="toEdit(scope)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteMember(scope)">删除</el-button>

            <el-button type="info" v-if="scope.row.status == 1" size="mini" @click="startQuartz(scope)">任务启动</el-button>
            <el-button type="warning" v-if="scope.row.status == 0" size="mini" @click="stopQuartz(scope)">任务暂停</el-button>
            <el-button type="danger" size="mini" @click="deleteQuartz(scope)">任务删除</el-button>
          </template>

以上是关于Vue v-if 动态控制el-button 显示的主要内容，如果未能解决你的问题，请参考以下文章