title: 'AppKey', key: 'ak', ellipsis: { tooltip: true, }, render(row) { return [ h( NPopover, { trigger: 'hover', }, { trigger: () => { return h( NButton, { strong: true, secondary: true, type: 'info', size: 'small', style: 'margin-left: 5px;font-size:10px;', }, { default: () => '┅' }, ) }, default: () => { return h( NSpace, { vertical: true, }, { default: () => { return [ h( NButton, { secondary: true, type: 'success', size: 'small', onClick: () => CopyText(row.ak), }, { default: () => '复制', quaternary: true }, ), ] }, }, ) }, }, ), ] },怎么样能够在表格内显示内容,在内容右边显示‘...’鼠标放上去显示复制按钮
时间: 2024-03-16 07:46:41 浏览: 44
we.dog-master_spider_twrj.vip_http://master.we_舔王日记_tianwangriji
您可以使用Naive UI的`NPopover`组件来实现在内容右边显示省略号和鼠标放上去显示复制按钮的效果。以下是一个示例代码,可以在表格中的AppKey列中实现该效果:
```javascript
{
title: 'AppKey',
key: 'ak',
ellipsis: {
tooltip: true,
},
render(row) {
return [
h(
NPopover,
{
trigger: 'hover',
},
{
trigger: () => {
return h(
NButton,
{
strong: true,
secondary: true,
type: 'info',
size: 'small',
style: 'margin-left: 5px;font-size:10px;',
},
{ default: () => '┅' }
);
},
default: () => {
return h(
NSpace,
{
vertical: true,
},
{
default: () => {
return [
h(
NButton,
{
secondary: true,
type: 'success',
size: 'small',
onClick: () => CopyText(row.ak),
},
{ default: () => '复制', quaternary: true }
),
];
},
}
);
},
}
),
h(
NTooltip,
{},
{
default: () => {
return h(
'span',
{
style: {
display: 'inline-block',
maxWidth: '100%',
verticalAlign: 'middle',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
},
row.ak
);
},
}
),
];
},
},
```
在该代码中,我们在`render`函数中使用了`NPopover`和`NTooltip`组件来实现省略号和鼠标放上去时显示复制按钮的效果。具体地,我们在表格列中返回了一个数组,其中第一个元素是`NPopover`组件,用于实现省略号效果,第二个元素是`NTooltip`组件,用于将表格内容显示为文本,并实现鼠标放上去时显示完整内容的效果。同时,我们还使用了`NSpace`组件来将复制按钮和省略号垂直排列。
阅读全文