antdesign table超出部分省略，鼠标放上去显示完整数据

原创于 2022-11-09 15:15:32 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨了如何使用JavaScript实现材料内容的高效展示，通过customCell和customRender函数，提供了自适应宽度的列，并附带了鼠标悬停提示。主要涉及HTML、CSS和AJAX技术的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

js:

columns : [
        { title: '材料内容',dataIndex: 'neirong',width: 200, ellipsis: true,
          customCell : () => {
            return {
              style: {
                width: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow:'ellipsis',
                cursor:'pointer'
              }
            }
          },
          customRender: (text,record) => <a-tooltip placement="topLeft" title = {record.neirong} >{record.neirong}</a-tooltip>},
      ],