Element UI 中 el-table el-table-column 实现密码的睁眼闭眼

最新推荐文章于 2024-05-06 20:38:37 发布

不想敲代码的程序(>^ω^<)喵

最新推荐文章于 2024-05-06 20:38:37 发布

阅读量2k

点赞数 3

本文链接：https://blog.csdn.net/qq_40173750/article/details/126426107

版权

本文介绍如何在Vue.js项目中利用Element UI的el-table和el-table-column组件，结合JavaScript实现表格内密码字段的睁眼闭眼效果。通过列表渲染时设置状态，并在点击事件中切换当前行的状态，达到显示或隐藏密码的目的。

摘要由CSDN通过智能技术生成

代码如下

思路：列表渲染的时候，给一个状态设置默认值，点击睁眼闭眼操作的时候，改变当前行的状态，实现睁眼闭眼操作

<el-table-column label="平台密码" min-width="160" >
      <template v-slot="{row}" >
              <div class="flex">
                     <div  v-if="!row.show">
                     <span class="fs-14">******</span>
                     <svg-icon slot="reference" icon-class="close-eye" class="icon" @click="handleShow(row)"></svg-icon>
                      </div>
                       <div v-else>
                      <span class="fs-14" v-if="row.show">{
  {row.password}}</span>
                     &