一、设置 ellipsis
使用数据表格Data Table组件的省略设置 ellipsis
,但是如果内容过长的情况下,会溢出
const textColumns = { key: 'uie_content', title: '文本', ellipsis: { tooltip: true, }, },
二、自定义省略内容的宽度
1、方式一
key: 'uie_content',
title: '文本',
ellipsis: {
tooltip: {
scorllable: true,
contentStyle: {
maxWidth: '800px',
maxHeight: '70vh',
},
},
},
2、方式二
使用 弹出信息Popover组件,自定义省略内容的宽度
{
key: 'uie_content',
title: '文本',
render(rowData, rowIndex) {
return h(NPopover,
{
placement: 'top',
contentStyle: {
maxWidth: '500px',
maxHeight: '300px',
},
},
{
trigger: () =>
h(
'p',
{
class: 'truncate w-full',
style: "margin: 0px;max-width:60px"
},
{
default: () => value,
}
),
default: () => h('p', {
style: "margin: 5px;word-break: break-all;"
}, { default: () => value }),
}
)
},
},
最后修改于 2023-10-23 21:31:46
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

