vue 不同条件展示不同页面_vue学习笔记--表格列中根据不同内容显示不同按钮

目标：在表格中，A列的数据显示不同，B列根据A列中不同的数据，再显示不同的按钮。

如图：

2.png

分析一下，“状态”这一列，有不同的tag。操作这一列会根据“状态”这列“已注册”“未注册”去分别显示“注销账号”或者是“获取注册链接”。

先做“已注册”“未注册”效果，tag 实现不同的颜色，就是通过type属性实现的，

,对于tag的type直接用三元表达式进行实现

代码片段

plain

size="mini"

:type="scope.row.state=='已注册' ? 'success' : 'warning'">

{ {scope.row.state}}

接下来来如何让操作这一列显示“注销账号”或者是“获取注册链接”呢？。

先做基本的东西，如给button type 设置text.等

接下来实现这种视觉效果的方法有两种：

第一种 ，还是利用三元表达式：

{ {scope.row.state=='已注册' ? "注销账号" : "获取注册链接"}}

这行代码的意思就是 判断state(状态)是'已注册' 还是'未注册' ，如果是前者，那么直接显示“注销账号”，否则，就显示“获取注册链接”

这个方法也能实现不同按钮的效果，但是暂时还不能实现图标也跟着变的效果，另外，这样做的缺陷是无法再给不同的按钮加事件，以后如果能研究出来或者谁知道这种方法如何实现以上两个点，欢迎补充，共同学习。

第二种，利用v-if v-else ,根据scope.row.state==？ 去判断到底显示哪个。

这个方法不仅可以根据需求去修改图标，还能分别加事件，很方便。

注销账号

获取注册链接