NaiveUI | 数据表格超长文字省略处理

一、设置 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',
            // 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 }),
          }
        )
      },
    },