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

最新推荐文章于 2024-04-29 17:30:30 发布

原创最新推荐文章于 2024-04-29 17:30:30 发布 · 2.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

收录于

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

效果：

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>},
      ],