springboot，vue，elemen

Question

springboot+vue中，el-table-column中的密码怎么显示成**，而且点击小眼睛显示密码

Answer 1

1、在数据模型中添加一个布尔字段，用于指示是否应显示密码：

{
  password: "mypassword",
  showPassword: false
}

2、在el-table-column 中使用模板渲染密码列：

<el-table-column
  prop="password"
  label="Password"
  width="180">
  <template slot-scope="{ row }">
    <el-input
      v-model="row.password"
      type="password"
      :show-password="row.showPassword"
      placeholder="Enter password">
      <template slot="append">
        <el-button
          @click.stop="row.showPassword = !row.showPassword"
          type="text"
          icon="el-icon-eye-off">
        </el-button>
      </template>
    </el-input>
  </template>
</el-table-column>