<template>
<el-table :data="tableData">
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column label="密码">
<template slot-scope="scope">
<password-cell :value="scope.row.password" @toggle="togglePassword(scope.row)"></password-cell>
</template>
</el-table-column>
</el-table>
</template>
<script>
// 密码单元格组件
Vue.component('password-cell', {
props: {
value: String
},
data() {
return {
showPassword: false
};
},
methods: {
togglePassword() {
this.showPassword = !this.showPassword;
}
},
template: `
<div>
<span v-if="!showPassword">******</span>
<span v-else>{{ value }}</span>
<button @click="togglePassword">切换</button>
</div>
`
});
export default {
data() {
return {
tableData: [
{ username: 'user1', password: 'password1' },
{ username: 'user2', password: 'password2' },
{ username: 'user3', password: 'password3' }
]
};
},
methods: {
togglePassword(row) {
// 在这里可以执行相关逻辑,如更新数据或发送请求
console.log('切换密码显示', row);
}
}
};
</script>
要在 el-table 中添加一个密码列 el-table-column 并实现切换显示密码的功能,你可以使用自定义插槽和组件的方式来实现。
最新推荐文章于 2024-07-22 12:29:37 发布
该代码示例展示了如何在Vue.js应用中创建一个自定义的`password-cell`组件,用于在表格中显示密码,初始以星号隐藏,点击按钮可切换显示真实密码。`el-table`和`el-table-column`用于构建表格,通过`slot-scope`传递数据并调用`togglePassword`方法来切换显示状态。
摘要由CSDN通过智能技术生成