antd使用tooltip的时候遇到的坑

在使用表格展示数据的时候,表格每一列的宽度是固定的,当单元格数据过多时,就会需要做溢出隐藏处理,当鼠标滑过(或点击等)的时候,展示该单元格的全部内容

columns = [
     { title: '描述', dataIndex: 'desc',key:"desc",
      onCell: () => {
        return {
          style: 
            maxWidth: 150,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer'
          }
        }
      },
      render: (text) => {text}
    },       

如果我们这么默认写会出现一个bug,就是当我的表格有很多数据,设置滚动,当滚动的时候,tooltip不随着当前的单元格一同向上或者向下滑动,这就需要用到getPopupContainer属性,让它挂载到当前行tr上面,或者是整个滚动的ant-table-body上面,我此时挂载在了ant-table-body上面。这时又出现了大问题,当我鼠标滑动到一行的单元格时我的tooltip元素上方溢出表格的内容被覆盖,设置z-index完全不好用,当我把表格的scroll={y:600}的溢出滚动去掉时,就不会被遮挡,分析是,父元素的溢出滚动原因,当父元素设置了溢出滚动,该定位的子元素,超出了父元素的上方的时候溢出部分被裁掉了,经过一系列的百度,当我把父元素的position:static就好用


你可能感兴趣的:(antd)