reactjs - Ant Design How to display "3 Selected" in Tree Select rather than display all value selected

Question

Basically in tree select when we select some options there will be shown the values chosen

Look at my code example

But when much data selected, the display will be larger and it's better for me to show the length of data selected than show all data selected

The expected result is 4 Selected, 2 Selected, 5 Selected.

标签： reactjsantd

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>
  );
}

检查演示。