如何在Foundry Slate Table组件中点击单元格取值并用于表格过滤？

核心思路 #

给Slate表格的单元格绑定点击事件，提取单元格内的纯文本值，再用这个值作为过滤条件筛选表格数据。

具体步骤及代码示例 #

1. 给单元格绑定点击事件

在你自定义的TableCell渲染组件中，给外层容器添加onClick事件，同时传入单元格的节点数据：

const TableCell = ({ attributes, children, element }) => {
  const handleCellClick = () => {
    const cellValue = getCellText(element.children);
    // 把获取到的值存入过滤状态
    // setFilterKeyword(cellValue);
    console.log('点击的单元格内容:', cellValue);
  };

  return (
    <td {...attributes} onClick={handleCellClick} style={{ padding: '8px', border: '1px solid #ddd' }}>
      {children}
    </td>
  );
};

2. 提取单元格的纯文本值

Slate的单元格内容由多节点组成，需要写个辅助函数递归提取纯文本：

const getCellText = (children) => {
  let text = '';
  const traverse = (nodes) => {
    nodes.forEach(node => {
      if (node.text) text += node.text;
      if (node.children) traverse(node.children);
    });
  };
  traverse(children);
  return text.trim();
};

3. 用单元格值实现表格过滤

通过状态维护过滤关键词，渲染表格时筛选匹配的行：

const [filterKeyword, setFilterKeyword] = useState('');

// 过滤表格行数据
const filteredRows = editor.children.filter(node => {
  if (node.type !== 'table-row') return false;
  // 检查当前行是否有单元格匹配过滤关键词
  return node.children.some(cell => {
    const cellText = getCellText(cell.children);
    return cellText.includes(filterKeyword);
  });
});

// 渲染时使用filteredRows替代原数据数组

注意事项 #

• 如果单元格包含格式化文本（加粗、斜体等），上述getCellText函数依然能正确提取纯文本，因为会递归遍历所有子节点。
• 若要区分表头和数据单元格，可以给单元格节点添加isHeader标识，在点击事件里判断后再执行过滤逻辑。

内容的提问来源于stack exchange，提问作者Daniel