Ant Design Как отобразить «3 выбранных» в Tree Select, а не отображать все выбранное значение

Question

В основном в дереве выберите, когда мы выбираем некоторые опции, будут показаны выбранные значения

Посмотрите на мой пример кода

Но когда выбрано много данных, на дисплеебудет больше, и для меня будет лучше показать длину выбранных данных, чем показать все выбранные данные

Ожидаемый результат - 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>
  );
}

Проверьте демонстрацию.