vue中使用iview的table表格让显示的数据部分显示为星号?158*****496怎么设置

表格数据脱敏处理
15812345789
显示成如下
158*496

vue.js iview

阅读 10.1k

3 个回答

dolphinfine

✓ 已被采纳

这种问题还是交给后台来做。前端做的都是伪加密。如果非要做的话就是用正则表达式替换了。

ryanlid

236128

发布于
2018-01-10

更新于
2018-01-12

让后台处理。脱敏在前端就是笑话。

update:
虽然反对前端处理，但是碰到SB的老大，不得不服。可以使用正则替换：

// 13012345123 -> 130*****123
replacePhone: function (str) {
  if(!str){
    return ''
  }
  return str.replace(/(\d{3})\d{5}(\d{3})/, '$1****$2');
}

luozz

5.8k3629

发布于
2018-01-10

更新于
2018-01-10

使用Vue的过滤器(filters)
我给你直接写了一个例子，你直接复制粘贴到一个HTML文件中打开就能看到效果，希望能帮助到你：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>例子</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        {{ message | protect }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '15761695277'
            },
            filters: {
                protect: function(value) {
                    if (!value) {
                        return ''
                    }
                    //对字符串进行截取
                    //substr(0, 3)表示从0开始取三位
                    //substr(-3)表示从后面数第三位开始取到最后
                    // *号随便加 多长都行
                    return value.substr(0, 3) + "*" + value.substr(-3);
                }
            }
        })
    </script>
</body>

</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

vue中使用iview的table表格让显示的数据部分显示为星号?158*****496怎么设置

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？