ZBLOG

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

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

  1. 使用 Tooltip 组件:当鼠标悬停在某个元素上时,使用 Tooltip 显示完整的内容,而不是简单地依赖 title 属性。

  2. 将所有借据编号包裹在一个可点击的容器中:这样,当用户点击任何部分时,都能触发事件。

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

  1. const columns = ref([
  2. // 其他列...
  3. {
  4. title: '产品名称',
  5. key: 'productName',
  6. width: 200,
  7. customRender: ({ record }) => {
  8. const uniqueProducts = [...new Set(record.workOrderLoans?.map(item => item.productName) || [])];
  9. const tooltipContent = record.workOrderLoans?.map(item =>
  10. `${item.productName}: ${item.loanInfoCode}`
  11. ).join('\n') || '-';
  12. return {
  13. children: h('div', {
  14. style: {
  15. whiteSpace: 'nowrap',
  16. overflow: 'hidden',
  17. textOverflow: 'ellipsis',
  18. cursor: 'pointer',
  19. width: '100%', // 关键修复
  20. },
  21. title: tooltipContent
  22. }, uniqueProducts.join(' / ') || '-')
  23. };
  24. }
  25. },
  26. {
  27. title: '借据编号',
  28. key: 'loanInfoCode',
  29. width: 250,
  30. customRender: ({ record }) => {
  31. const loans = record.workOrderLoans || [];
  32. const loanCodes = loans.map(item => item.loanInfoCode).join(' / ');
  33. return {
  34. children: h('div', {
  35. style: {
  36. whiteSpace: 'nowrap',
  37. overflow: 'hidden',
  38. textOverflow: 'ellipsis',
  39. width: '100%', // 确保宽度设置正确
  40. },
  41. onMouseEnter() {
  42. // 鼠标进入事件,可以用于显示 Tooltip
  43. },
  44. onMouseLeave() {
  45. // 鼠标离开事件,可以用于隐藏 Tooltip
  46. }
  47. }, [
  48. h('span', {
  49. style:{
  50. cursor:'pointer'
  51. },
  52. onClick(event) {
  53. event.stopPropagation(); // 阻止事件冒泡,以防触发父级事件
  54. handleLoanClick(loanCodes); // 点击显示所有借据信息(或实现你的逻辑)
  55. }
  56. }, loanCodes),
  57. h(Tooltip, { content: loanCodes, placement:"top" }, [
  58. h('a', {
  59. style:{ display:'inline' }
  60. }, "查看详情")
  61. ])
  62. ])
  63. };
  64. }
  65. },
  66. // 操作列...
  67. ]);

修改解释:

  • 使用了 Tooltip 来展示完整的借据编号。
  • onClick 方法中处理每个借据编号的点击事件。
  • 可以自定义样式和行为,根据项目需要进行调整。

请确保你已经引入了所需的组件库,比如 Tooltip,并根据你的需求调整样式和逻辑。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22656

分享:
扫描分享到社交APP
{ const uniqueProducts = [...new Set(record.workOrderLoans?.map(item => item.productName) || [])]; cons...&appkey=&pic=&searchPic=true")' title="分享到新浪微博" class="weibo"> { const uniqueProducts = [...new Set(record.workOrderLoans?.map(item => item.productName) || [])]; cons...")' title="分享到QQ好友" class="qq"> { const uniqueProducts = [...new Set(record.workOrderLoans?.map(item => item.productName) || [])]; cons...")' title="分享到QQ空间" class="qqzone">
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?