接口中的数据情况如下:
该功能实现后的效果:
表格组件的列名columns中operateType字段是对应页面上的操作类型,该字段的dataIndex要与接口的字段值保持一致
一开始我的想法是给dataIndex用个三目运算符://dataIndex: 'operateType ==1 ? '登录' : '未登录'',,发现并不能这样做,因为dataIndex是接收接口的字段值
columns: [
{
title: '序号',
dataIndex: 'sort',
width: '20%',
scopedSlots: { customRender: 'sort' },
},
{
title: '用户名',
dataIndex: 'username',
width: '30%',
scopedSlots: { customRender: 'username' },
},
{
title: '操作类型',
dataIndex: 'operateType',
//dataIndex: 'operateType ==1 ? '登录' : '未登录'',
width: '20%',
scopedSlots: { customRender: 'operateType' },
},
{
title: '时间',
dataIndex: 'operateTime',
width: '30%',
scopedSlots: { customRender: 'operateTime' },
},
],
查看官网之后尝试用插槽的方法:
具体实现如下:
1. scopedSlots: { customRender: 'operateType' },
2.判断
<!-- 判断 1为登录状态,0为未登录状态 -->
<span slot="operateType" slot-scope="text, record">
<a v-if="text == 1">登录</a>
<a v-if="text == 0">未登录</a>
</span>