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

前言：这是一个可以在 el-table 中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！1. 功能起源element el-input 组件中有一个 show-password 属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在 el-input 组件中。但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是 show-p

foursecond

5129人浏览 · 2022-01-20 22:26:02

foursecond · 2022-01-20 22:26:02 发布

前言：

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

在这里插入图片描述

1. 功能起源

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

2. 项目的整体布局

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

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

<template>
  <div>
    <!-- 员工账号区域 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      stripe
      max-height="500px"
    >
      <el-table-column prop="name" label="姓名" width="300" align="center">
      </el-table-column>
      <el-table-column prop="account" label="账号" width="300" align="center">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            class="view"
            type="text"
            @click.native.prevent="view(scope.$index, scope.row)"
            ><i class="el-icon-view"></i></el-button
          >{{ scope.row.password_d }}
        </template>
      </el-table-column>
      <!-- 操作区域 -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            slot="reference"
            size="mini"
            type="danger"
            icon="el-icon-key"
            @click.native.prevent="createNonceStr(scope.$index, scope.row)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //员工账号信息
      tableData: [
        {
          name: "王二花",
          account: "zzzzsss",
          password: "dfdf56789",
          password_d: "******",
        },
        {
          name: "王小花",
          account: "zzzzsss",
          password: "123456789",
          password_d: "******",
        },
        {
          name: "王二花",
          account: "zzzzsss",
          password: "1dfdffd789",
          password_d: "******",
        },
        {
          name: "王小花",
          account: "zzzzsss",
          password: "123456789",
          password_d: "******",
        },
        {
          name: "王二花",
          account: "zzzzsss",
          password: "1dfdffd789",
          password_d: "******",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.view {
  position: absolute;
  top: 7px;
  left: 200px;
}
</style>

就是这样一个普通的表格

在这里插入图片描述

注意 :

在绑定密码的地方加上

<template slot-scope="scope">
          <el-button
            slot="reference"
            size="mini"
            type="danger"
            icon="el-icon-key"
            @click.native.prevent="createNonceStr(scope.$index, scope.row)">重置密码</el-button>
</template>

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

在这里插入图片描述

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

3. 功能实现

3.1 显示、隐藏密码

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

在这里插入图片描述

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

在 methods 中定义这个方法

<script>
export default {
  data() {
    return {
      //员工账号信息
      tableData: [
        .........
      ],
      // 获取每一行的数据
      index_x: [],
    };
  },
  methods: {
    // 点击查看密码
    view(index, row) {
      console.log("密码");
      this.viewForm = Object.assign({}, row); // 重置对象
      this.index_x = index;
      var viewData = this.index_x;
      // console.log(this.tableData[viewData].password_d);
      console.log(this.tableData[viewData].password);
      if (this.tableData[viewData].password_d === "******") {
        this.tableData[viewData].password_d = this.tableData[viewData].password;
      } else {
        this.tableData[viewData].password_d = "******";
      }
    },
  },
};
</script>

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

3.2 重置密码功能

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

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

在这里插入图片描述

在 methods 中

<script>
export default {
  data() {
    return {
      //员工账号信息
      tableData: [
        {
          name: "王二花",
          account: "zzzzsss",
          password: "dfdf56789",
          password_d: "******",
        },
        {
          name: "王小花",
          account: "zzzzsss",
          password: "123456789",
          password_d: "******",
        },
        {
          name: "王二花",
          account: "zzzzsss",
          password: "1dfdffd789",
          password_d: "******",
        },
        {
          name: "王小花",
          account: "zzzzsss",
          password: "123456789",
          password_d: "******",
        },
        {
          name: "王二花",
          account: "zzzzsss",
          password: "1dfdffd789",
          password_d: "******",
        },
      ],
      // 获取每一行的数据
      index_x: [],
    };
  },
  methods: {
    // 点击查看密码
    view(index, row) {
      console.log("密码");
      this.viewForm = Object.assign({}, row); // 重置对象
      this.index_x = index;
      var viewData = this.index_x;
      // console.log(this.tableData[viewData].password_d);
      console.log(this.tableData[viewData].password);
      if (this.tableData[viewData].password_d === "******") {
        this.tableData[viewData].password_d = this.tableData[viewData].password;
      } else {
        this.tableData[viewData].password_d = "******";
      }
    },
    // 重置密码
    createNonceStr(index, row) {
      this.dialogVisible = true;
      let chars =["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",]; // 数字0-9和大小写字母
      var nums = "";
      this.viewForm = Object.assign({}, row); // 重置对象
      this.index_x = index;
      var viewData = this.index_x;
      for (let i = 0; i < 10; i++) { //生成10位任意数
        //这里是几位就要在这里不改变
        let id = parseInt(Math.random() * 61);
        nums += chars[id];
      }
      if (this.tableData[viewData].password_d === "******") {
        this.tableData[viewData].password_d = nums;
      } else {
        this.tableData[viewData].password_d = nums;
      }
      this.time = this.getNowFormatDate();
      this.res = nums;
      nums = "";
    },
  },
};
</script>

4. 完整代码

接下来就是完整的代码

<template>
  <div>
    <!-- 员工账号区域 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      stripe
      max-height="500px"
    >
      <el-table-column prop="name" label="姓名" width="300" align="center">
      </el-table-column>
      <el-table-column prop="account" label="账号" width="300" align="center">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            class="view"
            type="text"
            @click.native.prevent="view(scope.$index, scope.row)"
            ><i class="el-icon-view"></i></el-button
          >{{ scope.row.password_d }}
        </template>
      </el-table-column>
      <!-- 操作区域 -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            slot="reference"
            size="mini"
            type="danger"
            icon="el-icon-key"
            @click.native.prevent="createNonceStr(scope.$index, scope.row)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //员工账号信息
      tableData: [
        {
          name: "王二花",
          account: "zzzzsss",
          password: "dfdf56789",
          password_d: "******",
        },
        {
          name: "王小花",
          account: "zzzzsss",
          password: "123456789",
          password_d: "******",
        },
        {
          name: "王二花",
          account: "zzzzsss",
          password: "1dfdffd789",
          password_d: "******",
        },
        {
          name: "王小花",
          account: "zzzzsss",
          password: "123456789",
          password_d: "******",
        },
        {
          name: "王二花",
          account: "zzzzsss",
          password: "1dfdffd789",
          password_d: "******",
        },
      ],
      // 获取每一行的数据
      index_x: [],
    };
  },
  methods: {
    // 点击查看密码
    view(index, row) {
      console.log("密码");
      this.viewForm = Object.assign({}, row); // 重置对象
      this.index_x = index;
      var viewData = this.index_x;
      // console.log(this.tableData[viewData].password_d);
      console.log(this.tableData[viewData].password);
      if (this.tableData[viewData].password_d === "******") {
        this.tableData[viewData].password_d = this.tableData[viewData].password;
      } else {
        this.tableData[viewData].password_d = "******";
      }
    },
    // 重置密码
    createNonceStr(index, row) {
      this.dialogVisible = true;
      let chars =["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",]; // 数字0-9和大小写字母
      var nums = "";
      this.viewForm = Object.assign({}, row); // 重置对象
      this.index_x = index;
      var viewData = this.index_x;
      for (let i = 0; i < 10; i++) {
        //这里是几位就要在这里不改变
        let id = parseInt(Math.random() * 61);
        nums += chars[id];
      }
      if (this.tableData[viewData].password_d === "******") {
        this.tableData[viewData].password_d = nums;
      } else {
        this.tableData[viewData].password_d = nums;
      }
      this.time = this.getNowFormatDate();
      this.res = nums;
      nums = "";
    },
  },
};
</script>
<style lang="less" scoped>
.view {
  position: absolute;
  top: 5px;
  left: 200px;
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

foursecond

@weixin_49915090

已为社区贡献1条内容