目标:在表格中,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>