Antd reagiert: Der Inhalt der Tabellenliste überschreitet die Anzeige mit breiten Auslassungspunkten und den Tooltip des schwebenden Fensters

Antd reagiert: Der Inhalt der Tabellenliste überschreitet die Anzeige mit breiten Auslassungspunkten und den Tooltip des schwebenden Fensters

 let columns = [
	{
    
    
        title: '政策名称', dataIndex: 'name', key: "name", width: 100,
        onCell: () => {
    
    
          return {
    
    
            style: {
    
    
              maxWidth: 100,
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              cursor: 'pointer'
            }
          }
        },
        render: name => (
          <Tooltip placement="topLeft" title={
    
    name}>
            {
    
    name}
          </Tooltip>
        )
      },
    ]
		onCell: () => {
    
    
          return {
    
    
            style: {
    
    
              maxWidth: 100,
              overflow: 'hidden',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              cursor: 'pointer'
            }
          }
        },
  • Hier bedeutet dies, dass die Ellipsenanzeige die eingestellte Breite um einen Teil überschreitet und der Anzeigeeffekt beim Zoomen des Bildschirms sehr elegant ist
		render: name => (
          <Tooltip placement="topLeft" title={
    
    name}>
            {
    
    name}
          </Tooltip>
  • Gibt die QuickInfo-Eigenschaft des schwebenden Fensters an
  • Placement="topLeft" bedeutet, dass sich der angezeigte Text links befindet, wenn die Maus darüber schwebt

おすすめ

転載: blog.csdn.net/weixin_53532986/article/details/122334650