title:'产品名称 key: 'productName width: 200， customRender:({record)const uniqueProducts=[ ...new Set(record.workOrderLoans?.map((item)=>item.productName))] // 去重处理 const tooltipContent =record.workOrderLoans?.map((item)=>${item.productName}:${item.lo...-DPDK中文网

根据你的要求，我将帮你补充完整这个表格列的配置代码，确保能够处理产品名称去重、显示省略号，并在鼠标悬停时展示完整信息。这里假设你使用的是 Vue 或类似的框架（因为你提到了 h 函数和 JSX 风格）。以下是一个完整示例：

完整示例

const columns = [
  {
    title: '产品名称',
    key: 'productName',
    width: 200,
    customRender: ({ record }) => {
      // 去重处理
      const uniqueProducts = [...new Set(record.workOrderLoans?.map(item => item.productName))];
      
      // Tooltip 内容，使用换行符来分隔不同的产品信息
      const tooltipContent = record.workOrderLoans?.map(item => `${item.productName}: ${item.loanInfoCode}`).join('\n') || '_';
      
      return h(
        'div',
        {
          style: {
            whiteSpace: 'nowrap', // 不换行
            overflow: 'hidden', // 超出隐藏
            textOverflow: 'ellipsis', // 溢出文本显示省略号
            cursor: 'pointer', // 鼠标指针为手形状
            width: '200px' // 宽度设置为200px
          },
          title: tooltipContent // 悬停时显示内容
        },
        uniqueProducts.join('/') || '-' // 产品名用斜杠分隔显示, 如果没有则显示'-'
      );
    }
  },
  {
    title: '客户问题',
    dataIndex: 'customerProblem',
    key: 'customerProblem',
    width: 200,
  }
];

// 数据示例
const data = [
  {
    key: '1',
    workOrderLoans: [
      { productName: "贷款A", loanInfoCode: "LA001" },
      { productName: "贷款B", loanInfoCode: "LB002" },
      { productName: "贷款A", loanInfoCode: "LA003" } 
    ],
    customerProblem: "这是一个非常长的客户问题示例，如果内容过长会被省略..."
  },
  // 更多数据...
];

// 使用表格组件渲染（假设是在 Vue 中）
<YourTableComponent :columns="columns" :dataSource="data" />

整体思路说明

去重处理：使用 Set 来从 workOrderLoans 数组中获取唯一的产品名称。
Tooltip 内容：通过 map 方法生成每个产品名称及其对应的信息，并通过换行符连接成字符串作为工具提示内容。
样式：
- 设置了 whiteSpace, overflow, 和 textOverflow 属性，以确保超出的文本以省略号形式展现。
- 设置了宽度和指针样式。