element表格中密码列通过点击表头控制是否加密显示怎么写

好的，下面是一个简单的示例，演示如何在element-ui的表格中实现点击表头控制密码列加密显示的功能。

首先，我们需要在表格的列定义中，为密码列添加一个 `formatter` 属性。这个属性用来指定密码列的显示方式。在我们的示例中，我们将使用一个自定义的 `passwordFormatter` 函数来控制密码列的显示。这个函数的作用是根据密码列的当前显示状态，来决定是显示加密后的密码，还是显示原始的明文密码。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="password" label="密码" :formatter="passwordFormatter"></el-table-column>
  </el-table>
</template>

接下来，我们需要在表头中添加一个按钮，用来触发密码列的加密显示。我们可以使用 `slot-scope` 属性来自定义表头的内容，并在其中添加一个 `el-button` 按钮。当用户点击这个按钮时，我们将调用 `togglePasswordDisplay` 方法，来切换密码列的显示状态。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="password" label="密码" :formatter="passwordFormatter">
      <template slot-scope="{ column }">
        <el-button @click="togglePasswordDisplay(column)">
          {{ column.showPassword ? '隐藏密码' : '显示密码' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

最后，我们需要在组件的 `methods` 中，实现 `passwordFormatter` 和 `togglePasswordDisplay` 两个方法。`passwordFormatter` 方法用来控制密码列的显示方式，而 `togglePasswordDisplay` 方法用来切换密码列的显示状态。具体实现如下：

<script>
export default {
  data() {
    return {
      tableData: [
        { username: 'user1', password: 'password1' },
        { username: 'user2', password: 'password2' },
        { username: 'user3', password: 'password3' },
      ],
    };
  },
  methods: {
    passwordFormatter(row, column, cellValue) {
      if (column.showPassword) {
        return cellValue;
      } else {
        return '******';
      }
    },
    togglePasswordDisplay(column) {
      column.showPassword = !column.showPassword;
      this.$forceUpdate();
    },
  },
};
</script>

在 `passwordFormatter` 方法中，我们根据 `column.showPassword` 属性的值来决定密码列的显示方式。如果这个属性为 `true`，则显示原始的明文密码；否则则显示加密后的密码。

在 `togglePasswordDisplay` 方法中，我们将切换 `column.showPassword` 属性的值，并调用 `$forceUpdate` 方法来强制更新表格的显示。这个方法的作用是告诉Vue，我们已经修改了组件的状态，需要重新渲染组件以反映这些修改。

这样，我们就完成了在element-ui的表格中实现点击表头控制密码列加密显示的功能。