vue列表不同状态不同操作选项

STATICHIT静砸

已于 2022-12-17 16:24:11 修改

阅读量1.2k

点赞数

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

于 2022-12-17 16:24:10 首次发布

本文链接：https://blog.csdn.net/m0_62742402/article/details/128354578

版权

vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

后台管理时，最基本的一种列表就是用户列表，一般是均有修改资料和封号这样子的操作选项，而进行一些列表管理时，操作选项会根据具体内容而有所不同

我们无需对按钮进行过多的变换

解决思路是有多少种操作情况就写多少种按钮，使用vue的v-if来操作显示哪个按钮

通过 v-if指令决定按钮的显示隐藏。

<el-table-column property="address" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="setGrade(scope.row)"
                type="text"
                size="small"
                >等级设置</el-button
              >
              <el-button
                @click="evaluationResult(scope.row)"
                type="text"
                size="small"
                >等级评价结果</el-button
              >
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button
              v-if="scope.row.module == '启用中'"
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >停用</el-button
              >
              <el-button
              v-if="scope.row.module === '已停用'"
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >启用</el-button
              >
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>

参考文章：vue+element中,根据状态的不同,显示不同的操作按钮 - leahtao - 博客园 (cnblogs.com)