一、设置 ellipsis
使用数据表格Data Table组件的省略设置 ellipsis
,但是如果内容过长的情况下,会溢出
const textColumns = {
key: 'uie_content',
title: '文本',
ellipsis: {
tooltip: true,
},
},
二、自定义省略内容的宽度
使用 弹出信息Popover组件,自定义省略内容的宽度
{
key: 'uie_content',
title: '文本',
render(rowData, rowIndex) {
return h(
NPopover,
{
placement: 'top',
// width: 'trigger', //设定 `width="trigger"` 使 popover 的宽度等于触发元素。
contentStyle: {
maxWidth: '600px', //自定义宽度
},
},
{
trigger: () =>
h(
'p',
{
class: 'truncate w-full',
},
{
default: () => rowData.uie_content,
}
),
default: () => h('p', {}, { default: () => rowData.uie_content }),
}
)
},
},
标签:uie,naiveui,自定义,content,超长,trigger,ellipsis,省略
From: https://www.cnblogs.com/yangyukeke/p/17664501.html