elment-ui 表格密码内容加密显示可查看 如何实现

在element-ui表格中，可以通过自定义列的方式来实现表格密码内容加密显示且可查看的效果，具体实现方式如下：

1. 首先，在element-ui的表格组件中定义一个自定义列，例如：

<el-table-column label="密码">
  <template slot-scope="scope">
    <el-input v-model="scope.row.password" type="password"></el-input>
  </template>
</el-table-column>

2. 在自定义列中，将密码字段绑定到el-input组件的v-model上，并将el-input组件的type属性设置为“password”，这样就可以将密码内容加密显示。

3. 接下来，我们可以在el-input组件的右侧添加一个眼睛图标，用来切换密码的加密和明文显示。可以通过在el-input组件中添加一个append插槽来实现，例如：

<el-table-column label="密码">
  <template slot-scope="scope">
    <el-input v-model="scope.row.password" type="password">
      <template slot="append">
        <el-button icon="el-icon-eye" @click="togglePassword(scope.$index)"></el-button>
      </template>
    </el-input>
  </template>
</el-table-column>

4. 在togglePassword方法中，可以通过改变el-input组件的type属性来实现密码的加密和明文显示的切换，例如：

methods: {
  togglePassword(index) {
    this.$nextTick(() => {
      const input = this.$refs.table.$el.querySelectorAll('.el-input__inner')[index];
      const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
      input.setAttribute('type', type);
    });
  }
}

通过以上方式，就可以实现在element-ui表格中将密码内容加密显示且可查看的效果。