vue学习笔记--表格列中根据不同内容显示不同按钮

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

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

先做“已注册”“未注册”效果，tag 实现不同的颜色，就是通过type属性实现的，
,对于tag的type直接用三元表达式进行实现
代码片段

<el-table-column label="状态" prop="state" sortable align="center" width="80px">
<template slot-scope="scope">
<el-tag
plain
size="mini"
:type="scope.row.state=='已注册' ? 'success' : 'warning'">
{{scope.row.state}}
</el-tag>
</template>
</el-table-column>

接下来来如何让操作这一列显示“注销账号”或者是“获取注册链接”呢？。
先做基本的东西，如给button type 设置text.等

接下来实现这种视觉效果的方法有两种：
第一种 ，还是利用三元表达式：

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

这行代码的意思就是 判断state(状态)是'已注册' 还是'未注册' ，如果是前者，那么直接显示“注销账号”，否则，就显示“获取注册链接”
这个方法也能实现不同按钮的效果，但是暂时还不能实现图标也跟着变的效果，另外，这样做的缺陷是无法再给不同的按钮加事件，以后如果能研究出来或者谁知道这种方法如何实现以上两个点，欢迎补充，共同学习。

第二种，利用v-if v-else ,根据scope.row.state==？ 去判断到底显示哪个。
这个方法不仅可以根据需求去修改图标，还能分别加事件，很方便。

<el-button type="text" size="mini" v-if="scope.row.state=='已注册'">
<i class="fa fa-ban"></i> 注销账号
</el-button>
<el-button v-else type="text" size="mini">
<i class="fa fa-link"></i> 获取注册链接
</el-button>