vue表格信息进行空值填充，并使用 *** 修饰隐私信息

潮汐未见潮落

已于 2022-07-29 11:16:13 修改

阅读量1.2k

点赞数 3

分类专栏： vue 文章标签：前端 javascript 开发语言

于 2022-07-09 20:59:04 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/125694645

版权

vue 专栏收录该内容

47 篇文章 5 订阅

订阅专栏

前言：

在展示表格内容时，因为存在很多缺失的数据，渲染在页面上就会造成许多的空白项，不但看上去不美观，而且给人一种数据不准确的感觉，所以，我就想着对缺失的数据项进行填充，让表格看上去比较充实准确，表格使用 element组件库的table ，下面展示简单的方法

简要说明（简单表格代码及数据）

这里为了方便演示，只展示简单数据（写死在 data 中 ），通常情况下是发请求向后端拿到数据

<div class="table">
        <el-table 
        :data="TableData"  
        style="width: 100%" border>
            <el-table-column type="index" label="序号" ></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="phone" label="电话号码"></el-table-column>
        </el-table>
  </div>

 data(){
      return{
     TableData:[
         {
             name:'王小虎', address: '',phone:'13854562123'
         },
         {
             name:'',address: '上海市普陀区金沙江路 1518 弄',phone:'13698745236'
         },
         {
             name:'张大炮',address: '上海市普陀区真北路',phone:''
         }
         ]    
     }
  },

v-for判断缺失值

缺失值

可以看到表格中展示了较多的缺失值

v-for简单填充

通过 v-for 判断数据是否为空，然后给表格填充数据

初步实现

<div class="table">
        <el-table 
        :data="TableData"  
        style="width: 100%" border>
            <el-table-column type="index" label="序号" ></el-table-column>
            <el-table-column  label="姓名" >
                 <template slot-scope="scope">     
                    <p v-if="scope.row.name != ''"> {{ scope.row.name }}</p>
                    <p v-else>李四</p>
                </template>
            </el-table-column>  -->
             <el-table-column  label="地址" >
                <template slot-scope="scope">     
                    <p v-if="scope.row.address != ''"> {{scope.row.address }}</p>
                    <p v-else> 上海市南京路 </p>
                </template>
            </el-table-column>
            <el-table-column  label="电话号码" >
                <template slot-scope="scope">     
                    <p v-if="scope.row.phone != ''"> {{ scope.row.phone }}</p>
                    <p v-else>10086</p>
                </template>
            </el-table-column>  
        </el-table>
  </div>

这样的表格乍一看没什么大问题，但是代码中填充的数据是固定的，因为这里的表格只有三行，所以体现不出问题，但是这样的代码肯定是有问题的，后面我就修改了代码，加上 *** 对每个数据项进行修饰

对表格信息进行隐私处理

新建一个处理函数，然后在文件中引入该处理函数（我这里是在 utils 下新建 mask.js 文件）

信息隐私修饰规则

// 全部掩码规则

// 用户姓名（限定：文字必须≥2）：仅显示姓名中的最后一个汉字，其余文字使用 *（根据实际字数）代替。
export function nameMask (value) {
    if (value && value.length >= 2) {
      return "*".repeat(value.length-1) + value.substr(value.length - 1)
    } else {
      return value
    }
  }

  // 手机号：仅显示前三位与后两位数字，其余数字使用 *（根据实际位数） 代替。
  export function phoneNumberMask (value) {
    if (value && value.length > 5) {
      return value.substr(0, 3) + "*".repeat(value.length-5) + value.substr(value.length - 2)
    } else {
      return value
    }
  }

  // 地址名称：仅显示头、尾各两个文字，其余字符统一使用6位 * 代替。
  export function companyMask (value) {
    if (value && value.length > 4) {
      return value.substr(0, 2) + "*".repeat(6) + value.substr(value.length - 2)
    } else {
      return value
    }
  }

在script中引入并使用

import {nameMask,phoneNumberMask,companyMask} from '@/utils/mask'

注意要在 data 中声明使用

 data(){
    this.nameMask = nameMask
    this.phoneNumberMask = phoneNumberMask
    this.companyMask = companyMask
      return{
     TableData:[
         {
             name:'王小虎', address: '',phone:'13854562123'
         },
         {
             name:'',address: '上海市普陀区金沙江路 1518 弄',phone:'13698745236'
         },
         {
             name:'张大炮',address: '上海市普陀区真北路',phone:''
         }
     ]
          
     }
  },

完善代码

在 methods 中定义一个函数，随机生成一个 11 位数，对数字进行简单处理判断，让它看起来像一个电话号码，再加上上一步实现的表格信息隐私处理，可以做到以假乱真的地步

使用 Math.random 随机生成数，使用 Math.floor 对数字进行取整，通过正则表达式让随机数的形式像一个电话号码，递归调用函数，确保返回的随机数达到预期的效果，下面展示项目修改后的完整代码

当实现生成随机电话号码之后，我就想着再生成随机姓名，就是通过对汉字的 Unicode 转码来实现，Unicode编码是16进制数，其中汉字对应范围为 4E00-9FA5，转换为10进制数就是 19968-40869 ，只要生成这个区间的十进制数，再转成十六进制，再转码就可以得到随机汉字，再通过循环可以得到多位汉字，代码放在下面

表格代码

<div class="table">
        <el-table 
        :data="TableData"  
        style="width: 100%" border>
            <el-table-column type="index" label="序号" ></el-table-column>
             <el-table-column  label="姓名" >
                 <template slot-scope="scope">     
                    <p v-if="scope.row.name != ''"> {{ nameMask(scope.row.name) }}</p>
                    <p v-else>{{ nameMask(RandomName(3)) }}</p>
                </template>
            </el-table-column>  -->
             <el-table-column  label="地址" >
                <template slot-scope="scope">     
                    <p v-if="scope.row.address != ''"> {{ companyMask(scope.row.address) }}</p>
                    <p v-else>{{ companyMask('上海市南京路') }}</p>
                </template>
            </el-table-column>
            <el-table-column  label="电话号码" >
                <template slot-scope="scope">     
                    <p v-if="scope.row.phone != ''"> {{ phoneNumberMask(scope.row.phone) }}</p>
                    <p v-else>{{ phoneNumberMask(RandomPhoneNumber()) }}</p>
                </template>
            </el-table-column>        
        </el-table>
  </div>

随机电话号码生成函数

methods:{
    //  随机生成电话号码
     RandomPhoneNumber(){
         var number = Math.floor(Math.random() * (10000000000)) + 10000000000
         if( /[1][3-9][0-9]{9}/.test(number)){
             return String(number)
         }else{
             this.RandomPhoneNumber()
         }    
     }  
 }

随机姓名生成函数

RandomName(num){
        let arr = []
        for (let i = 0; i < num; i++) {
            var _rsl = ""
            var _randomUniCode = Math.floor(Math.random() * (40870 - 19968) + 19968).toString(16)
            eval("_rsl=" + '"\\u' + _randomUniCode + '"')
            arr.push( _rsl)
        }
    let chinese = arr.join("")
            return chinese 
     }