<template>
<a-table id="tabledata" ref="table" size="middle" bordered rowKey="id" :columns="columns">
<!-- 作用域插槽 -->
<template slot="cardNo" slot-scope="text, record, index">
<span v-if="record.lickOne" @click="showenter(index)">{{ record.cardNo | hideMiddle }}</span>
<span v-else @click="showleave(index)">{{ record.cardNo }}</span>
<!-- <span>{{ record }}</span> -->
</template>
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '证件号码',
align: 'center',
dataIndex: 'cardNo',
//绑定作用域插槽
scopedSlots: { customRender: 'cardNo' }
}
]
}
},
//过滤器
filters: {
hideMiddle(val) {
return `${val.substring(0, 6)}********${val.substring(val.length - 4)}`
},
// 姓名
hidename(val) {
return `${val.substring(0, 0)}*${val.substring(val.length - 1)}`
}
},
methods: {
//身份证号脱敏
showenter(index) {
this.dataSource[index].lickOne = false
},
showleave(index) {
this.dataSource[index].lickOne = true
},
//往数据加载方法里面循环进去一个假数据
loadData() {
getAction(this.url.list, params).then(res => {
if (res.success) {
//在这个地方写一个forEach
res.result.records.forEach(item => {
item.lickOne = true
item.lickOnename = true
})
// 截止
this.dataSource = res.result.records
this.ipagination.total = res.result.total
}
})
}
}
}
</script>
<style></style>
姓名,身份证号,关键信息脱敏
最新推荐文章于 2024-03-06 21:45:00 发布
该博客主要展示了如何在Vue.js中使用A-Table组件进行数据展示,并实现敏感信息如身份证号的脱敏处理。通过作用域插槽和自定义过滤器,当点击时可以切换显示完整信息。同时,博客还涉及到数据加载方法,利用forEach遍历并设置默认状态。
摘要由CSDN通过智能技术生成