columns.value = [{ title: '编码', key: 'code', ellipsis: { tooltip: true, }, }, { title: '名称', key: 'name', ellipsis: { tooltip: true, }, }, { title: '备注', key: 'remark', ellipsis: { tooltip: true, }, }, { title: '是否启用', key: 'enabled', sortOrder: false, //sorter: 'default', render: (rowData : any, rowIndex : number) => { return h( NCheckbox, { size: 'small', checked: rowData.enabled, }, { default: () => '' }, ) }, }, { title: 'AppKey', key: 'ak', ellipsis: { tooltip: true, }, }, { title: 'SecretKey', key: 'sk', ellipsis: { tooltip: true, }, },}, ];怎么让key=‘sk’这一列的数据在显示时是以密码的形式
时间: 2024-03-16 22:41:45 浏览: 47
可以使用 render 函数来实现以密码形式显示 SecretKey。在 render 函数中,先判断当前行的 SecretKey 是否为空,如果为空则直接返回空字符串,否则返回一组由星号组成的字符串,长度与 SecretKey 相同,以此来代替 SecretKey 的实际值。具体实现可以参考下面的代码:
```
columns.value = [
{
title: '编码',
key: 'code',
ellipsis: {
tooltip: true,
},
},
{
title: '名称',
key: 'name',
ellipsis: {
tooltip: true,
},
},
{
title: '备注',
key: 'remark',
ellipsis: {
tooltip: true,
},
},
{
title: '是否启用',
key: 'enabled',
sortOrder: false,
//sorter: 'default',
render: (rowData: any, rowIndex: number) => {
return h(
NCheckbox,
{
size: 'small',
checked: rowData.enabled,
},
{ default: () => '' },
);
},
},
{
title: 'AppKey',
key: 'ak',
ellipsis: {
tooltip: true,
},
},
{
title: 'SecretKey',
key: 'sk',
ellipsis: {
tooltip: true,
},
render: (rowData: any, rowIndex: number) => {
if (!rowData.sk) {
return '';
}
return '******'.substr(0, rowData.sk.length);
},
},
];
```
在上面的代码中,我们在 SecretKey 列的 render 函数中,先判断 rowData.sk 是否为空,如果为空则直接返回空字符串;否则使用 `******` 这个由星号组成的字符串,截取相同长度的子串来代替 SecretKey 的实际值。这样就可以以密码的形式显示 SecretKey 列的数据了。
阅读全文