对数据进行脱敏操作，hover展示（vue3+element plus）

最新推荐文章于 2023-06-30 23:36:09 发布

code需要沉淀

最新推荐文章于 2023-06-30 23:36:09 发布

阅读量1.2k

点赞数 1

文章标签：前端 vue.js vue elementui javascript

本文链接：https://blog.csdn.net/m0_60935443/article/details/125540510

版权

效果图：

代码：

<el-table-column align="left" label="负责人电话" min-width="120" prop="fzrdh">
   <template v-slot:="scope">
       <el-popover trigger="hover" placement="top">
           <span style="margin-left: 30px;">{{ scope.row.fzrdh }}</span>
           <template #reference>
               <span>{{formatter(scope.row.fzrdh,3,4) }}</span>
           </template>                   
       </el-popover>
   </template>
</el-table-column>

export const formatter =(field, before, after )=> {
  if (!field) {return '';}
  field = String(field);
  const regItem = '[\u4e00-\u9fa5a-zA-Z0-9]';
  const regExp = `(${regItem}{${before}})${regItem}*(${regItem}{${after}})`;
  const reg = new RegExp(regExp);
  return field.replace(reg, '$1*****$2');
}