#html #css #reactjs #antd
#HTML #css #reactjs #antd
Вопрос:
Я использую таблицу дизайна Ant для отображения динамических данных из внутреннего API здесь, в компании.
Это означает, что я не знаю, какие данные я получу для заполнения каждой ячейки. Это может быть большой текст, число, пустое значение, короткая строка, изображение, URL, что угодно.
Мне нужно применить горизонтальную и вертикальную прокрутку, но так, как описано в документах Ant Design:
Укажите ширину столбцов, если заголовок и ячейка не выровнены должным образом. (Оставьте по крайней мере один столбец без ширины, чтобы соответствовать гибкому макету) Рекомендуется фиксированное значение, которое больше ширины таблицы для scroll.x . Сумма незафиксированных столбцов не должна превышать scroll.x .
Прямо сейчас ширина в порядке, таблица дизайна Ant может определить наилучшую пропорцию для каждого столбца. Смотрите изображение ниже:
Проблема в том, когда я устанавливаю y-образную прокрутку. Ниже приведен пример:
Основная проблема здесь в том, что я не знаю размер данных для каждого столбца. Говоря о столбцах, я должен извлечь ключ из источника таблицы, чтобы динамически генерировать столбцы.
Возможно ли обойти это поведение?
Спасибо!
Комментарии:
1. Это дело уже сделано?
2. @OnesinusSaut нет.
3. @spiny_beast Я сделал обходной путь, чтобы исправить это. Это не самое привлекательное решение, но я столкнулся с каждым столбцом, вычисляющим их ширину на основе количества символов. Я также установил максимальное значение для ширины каждого столбца. Это сработало. Просто обратите внимание на объем данных в вашей таблице, это может вызвать некоторые проблемы с производительностью. Вы также можете установить разбивку на страницы, чтобы помочь вам с производительностью =)
Ответ №1:
Итак, это известная проблема при проверке дизайна Ant здесь, здесь, здесь и здесь
нет надлежащего исправления, я столкнулся с той же проблемой, я попытался установить ширину для каждого столбца, установить свойство «width» в столбце работает, но оно ломается из-за липкого заголовка.
другой простой способ обойти это — использовать горизонтальную прокрутку и удалить вертикальную прокрутку примерно так
scroll={{ x: 400 }}
Комментарии:
1. Спасибо! Я сделал то же самое, что и вы, я установил ширину для каждого столбца, но я сделал это динамически, и это сработало. Теперь вы можете установить столбцы XScroll, YScroll и fixed. Я опубликовал это в качестве ответа.
Ответ №2:
Обратитесь к этому комментарию в выпуске, прикрепленном @Afaq.
Для тех, у кого возникла эта проблема, задайте ширину для каждого из ваших столбцов и добавьте в таблицу следующий код: scroll={{ x: «max-content» }}. Это автоматически скорректирует ширину вашего столбца.
Это должно решить большинство людей.
Ответ №3:
Я придумал обходной путь для моей проблемы. Чтобы задать ширину для всей таблицы на основе ширины моих столбцов, мне пришлось просмотреть все данные таблицы, рассчитав ширину каждой ячейки на основе длины ее собственного содержимого.
После этого я могу просуммировать общую ширину и установить ее для таблицы.
Вот пример использования этого подхода:
