持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

前几天遇到的业务需求，需要在表格内展示密码，但大部分情况下，密码的展示是不应该直接展示的，因此需要做一个密码的显示与隐藏的功能，并且这个业务需要在组件中做，以便复用，下面是我对代码的重新整理

• 1. 先放效果图

• 2. 放代码

<template>
    <div>
      <!-- 员工信息 -->
      <el-table
        :data="tableData"
        style="width: 1400px; margin-top: 10px"
        border
        stripe
        max-height="500px"
      >
      <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :label="item.name"
            :prop="item.value"
            :width="item.width"
            show="true"
            :sortable="item.noSort ? false : 'custom'"
            >
            </el-table-column>
            <el-table-column label="密码" >
                <template slot-scope="scope">
                    <div  style="margin-left:10px  font-size:12px" v-if="scope.row.passwordShow">
                        {{ scope.row.cPassword }}<el-button
                        class="view"
                        @click="view(scope.$index, scope.row)"
                        ><i class="el-icon-view"></i
                            ></el-button>
                        </div>
                    </template>
            </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        fieldList:[
            {name : '日期',value: 'date',noSort: false,width:'300' },
            {name : '姓名',value: 'name',noSort: true,width:'100' },
            {name : '地址',value: 'address',noSort: true,width:'400' },
            {name : '性别',value: 'sex',noSort: true,width:'100' },
            {name : '年龄',value: 'age',noSort: true,width:'100',passWordShow:false },
        ],
        //员工账号信息
        tableData: [
        {
          date: "2016-05-02",
          name: "王小狗",
          address: "上海市普陀区金沙江路 1518 弄",
          sex: "女",
          age: null,
          password: "asdsadsadsa",
          cPassword: "******",
          passwordShow: true,
        },
        {
          date: "2016-05-04",
          name: "王小猫",
          address: "上海市普陀区金沙江路 1517 弄",
          sex: null,
          age: "29",
          password: "wqewqewqewq",
          cPassword: "******",
          passwordShow: true,
        },
        {
          date: "2016-05-01",
          name: "王小猪",
          address: "上海市普陀区金沙江路 1519 弄",
          sex: "女",
          age: "12",
          password: "354354354",
          cPassword: "******",
          passwordShow: true,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          sex: "男",
          age: null,
          password: "uytutyutt",
          cPassword: "******",
          passwordShow: true,
        },
        ],
      };
    },
    methods: {
       // 点击查看密码
       view(index) {
      if (this.tableData[index].cPassword === "******") {
        this.tableData[index].cPassword = this.tableData[index].password;
      } else {
        this.tableData[index].cPassword = "******";
      }
    },
    },
  };
  </script>
  <style lang="less" scoped>
  .view {
  background:rgba(255,255,255,1) !important;
  border: 0px solid ;
  position: static !important;
}
  </style>
  

1、根据数据渲染表格行

在工作中，这个部分应该进行二次封装做成组件的，但是为了演示方便，我给他做成了一个文件，表格行根据fieldList数组，并将其进行渲染，而这个数组包含着的每一个对象，即表头，渲染的时候也根据这个数组携带的参数进行配置.

在组件化开发中我们可以在组件外创建一个fieldList数组，并将其传入至组件中

<template>
    <div>
      <!-- 员工信息 -->
      <el-table
        :data="tableData"
        style="width: 1400px; margin-top: 10px"
        border
        stripe
        max-height="500px"
      >
      <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :label="item.name"
            :prop="item.value"
            :width="item.width"
            show="true"
            :sortable="item.noSort ? false : 'custom'"
            >
            </el-table-column>
            
              tableData: [
        {
          date: "2016-05-02",
          name: "王小狗",
          address: "上海市普陀区金沙江路 1518 弄",
          sex: "女",
          age: null,
          password: "asdsadsadsa",
          cPassword: "******",
          passwordShow: true,
        },
        {
          date: "2016-05-04",
          name: "王小猫",
          address: "上海市普陀区金沙江路 1517 弄",
          sex: null,
          age: "29",
          password: "wqewqewqewq",
          cPassword: "******",
          passwordShow: true,
        },
        {
          date: "2016-05-01",
          name: "王小猪",
          address: "上海市普陀区金沙江路 1519 弄",
          sex: "女",
          age: "12",
          password: "354354354",
          cPassword: "******",
          passwordShow: true,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          sex: "男",
          age: null,
          password: "uytutyutt",
          cPassword: "******",
          passwordShow: true,
        },
        ],

2、根据数据设置密码列的显示与隐藏

一般我们可以根据后端返回的数据，来设置这个业务是否需要，在数据tableData数组中，使用passwordShow: true来进行判断，就可以啦！！！

            <el-table-column label="密码" >
                <template slot-scope="scope">
                    <div  style="margin-left:10px  font-size:12px" v-if="scope.row.passwordShow">
                        {{ scope.row.cPassword }}<el-button
                        class="view"
                        @click="view(scope.$index, scope.row)"
                        ><i class="el-icon-view"></i
                            ></el-button>
                        </div>
                    </template>
            </el-table-column>
      </el-table>

3、实现点击按钮密码的显示与隐藏

在渲染密码那一列时，我们是使用了插槽的知识（备注：组件封装三要素 slot，prop,$emit），因此我们可以给点击的button按钮添加点击事件时将被点击的行传入进去，然后我们就可以在下面的事件函数中拿到进行判断，来实现密码的显示与隐藏啦！！！

    methods: {
       // 点击查看密码
       view(index) {
      if (this.tableData[index].cPassword === "******") {
        this.tableData[index].cPassword = this.tableData[index].password;
      } else {
        this.tableData[index].cPassword = "******";
      }
    },
    },
  };

ok！！我写完了！！