Vue+element el-table中显示隐藏and重置密码功能

前言：

这是一个可以在 el-table 中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！

1. 功能起源

element el-input 组件中有一个 show-password 属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在 el-input 组件中。

但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是 show-password 属性 在表格中就不能使用了

于是自己冥思苦想想到了一个方法，可以在表格中显示、隐藏密码。

在此基础上，还增加了一个可以重置密码的功能。点击重置密码可以生成任意的字符串。

2. 项目的整体布局

话不多说，接下来就为大家简述功能的实现，并附上代码

首先就是需要一个表格，并且绑定数据，然后写上自己需要的表头信息，和一个操作区域。

就是这样一个普通的表格

注意 :

1. 在绑定密码的地方加上

2. 在绑定的数据 tableData 中有两个密码

这样整体的布局就已经完成了，接下来就是功能的实现

3. 功能实现

3.1 显示、隐藏密码

在密码的地方有一个点击操作函数 view(scope.$index, scope.row)

让这个函数可以获取到每一行的密码

在 methods 中定义这个方法

这样就实现了显示、隐藏密码的功能

3.2 重置密码功能

这个功能就是点击能够重置密码，生成一个10位的任意字符串，并且这个生成的新密码回覆盖以前的旧密码

在操作区域的重置密码模块加上点击操作函数 createNonceStr(scope.$index, scope.row)

在 methods 中

4. 完整代码

接下来就是完整的代码