const columns = ref([ // 其他列... { title: '产品名称', key: 'productName', width: 200, customRender: ({ record }) => { const uniqueProducts = [...new Set(record.workOrderLoans?.map(item => item.productName) || [])]; cons...-DPDK中文网

要在鼠标移到借据编号时展示全部内容，并确保所有借据编号都可以点击，你可以采取以下策略：

使用 Tooltip 组件：当鼠标悬停在某个元素上时，使用 Tooltip 显示完整的内容，而不是简单地依赖 title 属性。
将所有借据编号包裹在一个可点击的容器中：这样，当用户点击任何部分时，都能触发事件。

以下是修改后的代码示例：

const columns = ref([
  // 其他列...
  { 
    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.loanInfoCode}`
      ).join('\n') || '-';

      return {
        children: h('div', {
          style: {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            cursor: 'pointer',
            width: '100%', // 关键修复
          },
          title: tooltipContent
        }, uniqueProducts.join(' / ') || '-')
      };
    }
  },
  { 
    title: '借据编号',
    key: 'loanInfoCode',
    width: 250,
    customRender: ({ record }) => {
      const loans = record.workOrderLoans || [];
      const loanCodes = loans.map(item => item.loanInfoCode).join(' / ');
      
      return {
        children: h('div', {
          style: {
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            width: '100%', // 确保宽度设置正确
          },
          onMouseEnter() {
            // 鼠标进入事件，可以用于显示 Tooltip
          },
          onMouseLeave() {
            // 鼠标离开事件，可以用于隐藏 Tooltip
          }
        }, [
          h('span', {
              style:{
                cursor:'pointer'
              },
              onClick(event) {
                  event.stopPropagation(); // 阻止事件冒泡，以防触发父级事件
                  handleLoanClick(loanCodes); // 点击显示所有借据信息（或实现你的逻辑）
              }
           }, loanCodes),
           h(Tooltip, { content: loanCodes, placement:"top" }, [
             h('a', { 
               style:{ display:'inline' } 
             }, "查看详情")
           ])
        ])
      };
    }
  },
  // 操作列...
]);