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 }),
          }
        )
      },
    },

__EOF__

本文作者：杨芋可可
本文链接：https://www.cnblogs.com/yangyukeke/p/17664501.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！