需求:
一级用户:隐藏身份证号码和电话号码,二级用户:身份证打码&&手机号正常显示
解决方法,
在表格对应的插槽中拿到对应的身份证和手机号码,用findIndex方法查询到该数据对应的用户级别,根据级别来控制显示或隐藏。
{
title: "身份证号码",
dataIndex: "idCard",
ellipsis: true,
scopedSlots: {customRender: 'idCard'},
},
{
title: "电话号码",
dataIndex: "phoneNumber",
ellipsis: true,
scopedSlots: {customRender: 'phoneNumber'},
},
// 通过手机号码查询账号等级
forPhoneNumber(value){
const index = this.listData.findIndex((item)=>{
return item?.phoneNumber == value;
})
return this.listData[index].userLevel;
},
// 通过身份证号码查询账号等级
forIdCard(value){
const index = this.listData.findIndex((item)=>{
return item.idCard == value;
})
return this.listData[index].userLevel;
}
},
<!-- 账号级别 -->
<template slot="userLevel" slot-scope="{ data }">
{{ data === 1 ? "一级用户" : data === 2 ? "二级用户" : '未知级别' }}
</template>
<!-- 电话号码 -->
<template slot="phoneNumber" slot-scope="{ data }">
{{forPhoneNumber(data) == 2 ? data : "" }}
</template>
<!-- 身份证号码 -->
<template slot="idCard" slot-scope="{ data }">
{{forIdCard(data) === 2 ? data.replace(/(.{3}).+(.{4})/g, '$1***********$2'): "" }}
</template>
bug:
当存在相同的身份证号或手机号时,findIndex方法只能查询出第一项的数据。后面相同的身份证或手机号的数据无法处理。
思路:
因为可能会存在相同的身份证号或手机号,所以无法根据当前数据的身份证号或手机号来查询该数据的用户级别。
我们可以直接根据当前数据的用户等级来判断该用户的身份证号和手机号隐藏还是显示。
{
title: "身份证号码",
// dataIndex: "idCard",
// ellipsis: true,
scopedSlots: {customRender: 'idCard'},
},
{
title: "电话号码",
// dataIndex: "phoneNumber",
// ellipsis: true,
scopedSlots: {customRender: 'phoneNumber'},
},
{
title: "操作",
scopedSlots: {
customRender: "action"
}
}
<!-- 电话号码 -->
<template #phoneNumber="{data}">
{{data.userLevel === 2 ? data.phoneNumber : "" }}
</template>
<!-- 身份证号码 -->
<template #idCard="{data}">
{{data.userLevel === 2 ? data.idCard.replace(/(.{3}).+(.{4})/g, '$1***********$2'): ""}}
</template>
因为我们把列数据在数据项中对应的 key(相当于数组中的索引)注释掉了,导致相应的插槽拿到data并不是对应的单个数据,而是全部的数据(与操作栏同理)。然后就能根据数据中的用户等级来判断身份证号和手机号显示还是隐藏。