若依 ruoyi-vue el-table 身份证号码隐藏，脱敏，移入点击显示

Xiaoweidumpb

于 2024-09-13 09:50:30 发布

阅读量418

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_43751489/article/details/142202273

版权

在这里插入图片描述
el-popover支持四种激活方式 hover，click，focus 和 manual 移入，点击，长按，手动

        <el-table-column label="证件号码" align="center" prop="idCard" >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <h2>证件号码: {{ scope.row.idCard }}</h2>
              <div slot="reference" class="name-wrapper">
                <el-link :underline="false" type="primary"> {{
                    scope.row.idCardType === '1' ? scope.row.idCard.replace(/^(.{6})(?:\w+)(.{4})$/, '\$1********\$2') : scope.row.idCard
                  }}
                </el-link>
              </div>
            </el-popover>
          </template>
        </el-table-column>