el-table el-table-column 操作el-table的单行数据的内容 实现手机号码中间4位*显示，操作el-table的单行数据的内容显示与隐藏
huayal
已于 2023-01-13 14:22:02 修改
阅读量1.7k
收藏
2
点赞数
1
于 2023-01-13 11:51:44 首次发布
本文介绍了如何在Vue.js和Element UI中实现在el-table组件中操作单行数据，使得手机号码在初始状态脱敏显示，点击按钮后显示完整号码，再次刷新恢复原状。通过在data中定义变量，并结合el-table-column和methods中的方法，利用scope.$index和自定义标志位实现这一功能。
一、效果图如下：
1，刚开始直接手机号码全部脱敏显示：
2，点击按钮：显示号码后，显示该行的手机号码全部位数，其他不变：
3，刷新后，恢复原样：
二、后端代码实现，手机号码脱敏显示，主要代码如下：
三、前端代码实现：
1，先在data() {retrun{}}中,定义：
2，在el-table-column中，写上如下代码：
最低0.47元/天 解锁文章
扫一扫
1702
暂无认证
到【灌水乐园】发言
杨思默: 教是最好的学
huayal: 更改配置文件的路径成windows
梅长苏、: 我部署到linux服务器上了，也遇到你这个问题了，我想知道要怎样直接导到windows上呢
parade岁月: 牛逼，idea咋还真么坑啊。帮了我的大忙了
李君临: 很有效 找了半天