小编点评

**方法一：使用 ellipsis 属性** ```js const textColumns = { key: 'uie_content', title: '文本', ellipsis: { tooltip: true, contentStyle: { maxWidth: '800px', maxHeight: '70vh', }, }, }; ``` **方法二：使用弹出信息Popover组件** ```js const render = (rowData, rowIndex) => { return h(NPopover, { placement: 'top', contentStyle: { maxWidth: '600px', }, trigger: () => { h(NPopover, { placement: 'top', contentStyle: { maxWidth: '600px', }, }); }, content: { render: () => h( 'p', { class: 'truncate w-full', }, {} ), }, }); }; ``` **使用说明** 1. 在数据表格中定义 `textColumns` 属性，指定 `ellipsis` 属性。 2. 方法一：设置 `ellipsis` 属性的值为 `{ tooltip: true, contentStyle: { maxWidth: '800px' } }`。 3. 方法二：在渲染组件时使用 `NPopover` 组件来显示省略内容。 4. 设置 `popover` 的 `maxWidth` 属性以指定省略内容的宽度。

正文

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