springboot，vue，elemen

springboot+vue中，el-table-column中的密码怎么显示成**，而且点击小眼睛显示密码

1、在数据模型中添加一个布尔字段，用于指示是否应显示密码：

{
  password: "mypassword",
  showPassword: false
}

2、在el-table-column 中使用模板渲染密码列：

<el-table-column
  prop="password"
  label="Password"
  width="180">
  <template slot-scope="{ row }">
    <el-input
      v-model="row.password"
      type="password"
      :show-password="row.showPassword"
      placeholder="Enter password">
      <template slot="append">
        <el-button
          @click.stop="row.showPassword = !row.showPassword"
          type="text"
          icon="el-icon-eye-off">
        </el-button>
      </template>
    </el-input>
  </template>
</el-table-column>

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

```java
<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>
                     <svg-icon slot="reference" icon-class="open-eye" class="icon" @click="handleShow(row)"></svg-icon>
                       </div>
                        </div>
                    </template>
 </el-table-column>
 
 
 
handleShow(row){ 
            row.show=!row.show
        },
 
列表渲染的时候给一个状态
 data.records.forEach((item)=>{
          item.show=false;
 
 
 
列表整体代码
  async getList(num){
            if(this.isLoading){
                return;
            }
            if(num){
                this.searchData.page=1
            }
            this.isLoading=true
            try{
                let {data}=await JTAPI.reptileQueryUserInfo({
                    page:this.searchData.page,
                    limit:this.searchData.limit,
                    startDate:this.searchData.time?this.searchData.time[0]:'',
                    endDate:this.searchData.time?this.searchData.time[1]:'',
                    platformCode:this.searchData.markPlatform, //平台类型
                    usernameContent:this.searchData.content, //账号输入框
 
                });
                data.records.forEach((item)=>{
                    item.show=false;
                })
                this.tableData=data.records;
                this.total=data.total
            }catch(err){
                 console.log(err)
            }
            this.isLoading=false
        },

可以用 v-if 来控制密码的显示和隐藏。

<template slot-scope="scope">
  <el-input
    v-if="!scope.row.isShowPassword"
    type="password"
    v-model="scope.row.password"
  ></el-input>
  <el-input
    v-else
    type="text"
    v-model="scope.row.password"
  ></el-input>
  <el-button
    type="text"
    @click="scope.row.isShowPassword = !scope.row.isShowPassword"
  >
    <i class="el-icon-eye" v-if="!scope.row.isShowPassword"></i>
    <i class="el-icon-eye-close" v-else></i>
  </el-button>
</template>

使用了 el-input 和 el-button 来实现密码的输入和点击小眼睛切换显示密码功能。

加一个 show-password

可以直接使用password控件。

主要思路，通过设置 密码项 的 <el-input 输入框的 type 属性值，实现密码的显示和隐藏。
当 type = text 时，密码会显示出来，当 type = password 时，密码会隐藏，并以 * 显示。
密码项 的 <el-input 输入框 完整代码如下：
<el-input :type="passwordType" v-model="loginData.password" placeholder="请输入密码..."
                          @keydown.enter.native="submitLogin">
                    <i slot="suffix" class="el-icon-view" @click="showPassword"></i>
</el-input>
:type表示这是一个变量，可以通过点击事件改变它的值。

详情可参考实例【Spring Boot + Vue 前后端分离项目 -- 登录页记住密码和隐藏密码】，链接：http://t.zoukankan.com/youcoding-p-14747265.html