一、设置 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
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇