Ant Design如何在“树形选择”中显示“ 3 Selected”而不是显示所有选择的值

Question

基本上在树选择中，当我们选择某些选项时，将显示所选的值

看my code example

但是当选择了很多数据时，显示会更大，并且比起显示所有选择的数据，我更希望显示选择的数据长度

预期结果为4 Selected，2 Selected，5 Selected。

Answer 1

使用maxTagCount和maxTagPlaceholder属性。

在这种情况下，SELECTED_THRESHOLD是常数，因此它将在超过+ X Selected个选定项目之后呈现2。

您应该根据输入宽度等条件使条件更通用。

function Demo() {
  const [selectedArray, setSelectedArray] = useState([]);

  return (
    <TreeSelect
      value={selectedArray}
      maxTagPlaceholder={`+ ${selectedArray.length - SELECTED_THRESHOLD} Selected`}
      maxTagCount={SELECTED_THRESHOLD}
      onChange={value => setSelectedArray(value)}
      ...
    >
      <TreeNode>
        ...
      </TreeNode>
    </TreeSelect>
  );
}

检查演示。