vue插槽使用slot-scope:ElementUI 根据后台返回的0 1渲染表格里的tag标签不同数据
如图 是表格中显示的 通知状况
根据需求,
- 当值为1时, 则表示已通知 tag标签类型为success 绿色的
- 当值为0时, 则显示未通知 tag标签类型为info 灰色的
- 当值既不为0也不为1,则显示未知,tag标签类型为默认primary
<el-table-column prop="tag" label="通知状况">
<template slot-scope="scope">
<!-- {{scope.row}} -->
<el-tag :type="scope.row.isNoticed == '1' ? 'success'
: scope.row.isNoticed == '0' ? 'info'
: 'primary'" disable-transitions>
{{scope.row.isNoticed == '1'? '已通知' :scope.row.isNoticed == '0' ? '未通知':'未知' }}
</el-tag>
</template>
</el-table-column>
分析:
scope.row代表的是后台返回的表格里这一行的数据
而scope.row.isNoticed代表的是这一行数据里 isNoticed
的这个字段
对于值可以判断 ,
- 如果为1 显示文字:
已通知
; - 如果为0显示文字:
未通知
; - 两者都不是显示文字:
未知
对于标签样式 绑定的type属性中 ,
- 如果为1 显示
success
样式; - 如果为0显示
info
样式; - 两者都不是显示
primary
样式
最终呈现的就是这样了