springboot+vue中,el-table-column中的密码怎么显示成**,而且点击小眼睛显示密码
时间: 2023-02-06 12:38:30 浏览: 298
在 el-table-column 中可以使用 template 来自定义列的内容,可以用 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>
```
在这个示例中,我们使用了 v-if 和 v-else 来切换密码的显示和隐藏,并使用了 el-input 和 el-button 来实现密码的输入和点击小眼睛切换显示密码功能。
注意:
- 这里使用了 el-table 的插槽功能,需要使用 slot-scope 来接收数据。
- 在行数据中需要增加一个字段 isShowPassword,用来记录当前密码是否显示。
- 在 el-input 中使用了 v-model 来双向绑定数据。
- 在 el-button 中使用了 @click 来绑定点击事件,并在事件处理函数中切换 isShowPassword 的值。
阅读全文