React+Antd表格中如何实现超长字符串的点击展开与收起？-html教程-PHP中文网

React+Antd表格中如何实现超长字符串的点击展开与收起？

花韻仙語

发布： 2025-02-19 19:16:01

原创

1139人浏览过

React+Antd表格中如何实现超长字符串的点击展开与收起？

react+ant design表格：巧妙处理超长文本的展开与收起

在使用React和Ant Design构建表格时，常常会遇到超长文本需要处理的情况。简单的省略号处理固然方便，但如果需要点击展开查看完整文本，并只展开当前行，则需要更精细的控制。

本文将介绍如何通过Ant Design Table组件的expandRowByClick和expandedRowRender属性实现这一功能。

关键在于灵活运用expandedRowKeys状态来管理展开的行，以及自定义expandedRowRender函数来渲染展开后的内容。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

代码示例：

<code class="javascript">import React, { useState } from 'react';
import { Table } from 'antd';

const columns = [{
  title: '超长内容',
  dataIndex: 'content',
  render: (text) => (text.length > 20 ? `${text.substring(0, 20)}...` : text), // 省略号处理
}];

const data = [{
  key: '1',
  content: '这是一段非常非常长的内容，需要进行省略号展示和点击展开功能。'
}];

const MyTable = () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);

  const onExpand = (expanded, record) => {
    const newExpandedRowKeys = expanded ? [...expandedRowKeys, record.key] : expandedRowKeys.filter(key => key !== record.key);
    setExpandedRowKeys(newExpandedRowKeys);
  };

  const expandedRowRender = (record) => (
    <div style={{ padding: '10px' }}>
      {record.content}
    </div>
  );

  return (
    <Table
      columns={columns}
      dataSource={data}
      expandable={{
        expandedRowRender,
        expandRowByClick: true,
        onExpand,
      }}
      expandedRowKeys={expandedRowKeys}
    />
  );
};

export default MyTable;</code>

登录后复制

通过以上代码，点击表格行时，只有该行会展开显示完整内容，实现展开和收起的切换效果。省略号处理在render函数中实现，保证了简洁性。此方法有效地解决了超长文本在表格中的展示问题，提升了用户体验。

以上就是React+Antd表格中如何实现超长字符串的点击展开与收起？的详细内容，更多请关注php中文网其它相关文章！