Vue页面表格数据为隐私性进行掩码处理用*号代替

最新推荐文章于 2024-04-11 09:34:42 发布

Pisces_224

最新推荐文章于 2024-04-11 09:34:42 发布

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36256590/article/details/126051323

版权

vue 专栏收录该内容

64 篇文章 11 订阅

订阅专栏

这篇博客介绍了在Vue项目中如何实现数据掩码，以保护隐私信息。通过创建一个名为`mask.js`的工具文件，定义了两个方法：`codeMask`用于显示激活码的前8位和后8位，中间部分用星号(*)替换；`authDocMask`则直接用星号代替全文。在表格组件中引入并使用这些方法，实现了数据的隐藏显示。该方法适用于需要部分显示敏感信息的场景。

摘要由CSDN通过智能技术生成

如题

很好理解，就是有些隐私性数据不方便一打开界面表格上就一览无余，所以需要用掩码如*来代替以作隐藏。实现灰常简单。

实现方法

步骤一
在vue项目目录下比如utils工具下新建一个 mask.js文件，写入方法如下：

// 激活码： 仅显示前8位与后8位，中间部分用 * 代替
export function codeMask(val) {
    if (val && val.length > 16) {
        return val.substr(0,8) + "*".repeat(val.length - 16) + val.substr(val.length - 8)
    } else {
        return val
    }
}

// 授权文件： 太长直接用 * 号代替
export function authDocMask(val) {

    return "*".repeat(val.length)
}

在需要引用的文件中引入

比如我的表格页面在table.vue中，那我就到这个页面代码里：
①

<script>
import {codeMask} from "@/utils/mask";

② 在data中声明使用：

export default {
...
data() {
this.codeMask = codeMask;   // 这里声明
return {
...
}

③ 表格中的对应列：

<el-table-column prop="active_code" label="激活码内容" width="200" show-overflow-tooltip>
	  <template slot-scope="scope">
	    <p v-if="scope.row.active_code !== ''">{{ codeMask(scope.row.active_code) }}</p>
	  </template>
</el-table-column>