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

一般情况下前端在做表格是时候会有状态的显示，下面是我的一个小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>

这样会根据后端返回的数据展示不同的按钮

最后

以上就是乐观乌龟为你收集整理的v-if判断el-table中按钮的显示与隐藏的全部内容，希望文章能够帮你解决v-if判断el-table中按钮的显示与隐藏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。