Я нашел множество примеров, близких к тому, что я ищу, но мне нужно больше контроля над дизайном таблицы. Кроме того, я не хочу, чтобы текст переносился, и хочу отображать многоточие и позволять контенту иметь всплывающую подсказку при наведении курсора, чтобы увидеть все это.
Это проект VueJS, и я использовал (или в зависимости от того, смогу ли я заставить его работать) Пользовательский интерфейс элемента
Итак, перейдем к деталям. Я хочу, чтобы моя таблица выглядела так:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas la la la la la la... A box of crackers and some super ri...
Oranges Mr. Bean Is Cool More chocolate milk
Этот пример text-overflow: ellipsis
Или вот так:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas A box of crackers and some super rich chocolate milk
Oranges Mr. Bean More chocolate milk
Или вот так:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas are not my favorite A box of crackers and some super r...
Oranges Mr. Bean More chocolate milk
Или вот так:
Header A Header B Header C
------------------------------------------------------------------------------- 100%
Apples Bananas Oranges
Running Out Of ideas to put in here
Дело в том, чтобы поля оставались выровненными по левому краю и не распределялись по ширине. Я пробовал различные макеты, такие как table-layout: fixed с и width: auto, и, честно говоря, я перепробовал так много вариантов, что не уверен, какими из них поделиться.
Чтобы усложнить задачу, таблица генерируется динамически из json, и я не знаю, какие столбцы у меня будут или их содержимое. Итак, вот некоторые из предпринятых мною псевдошагов:
// Figure out how many actual columns are visible
let visibleColumns = _.filter(this.$refs.table.columns, c => {
return c.label != null && c.label.length;
}).length;
// I'm doing this so I can just guess a good max width on a column
// Switch trimmed for brevity
let maxWidth;
switch (visibleColumns) {
case 1:
maxWidth = 1000;
break;
case 2:
maxWidth = 700;
break;
default:
maxWidth = 200;
break;
}
// Loop over my dynamic columns and find the longest value from the data
_.each(cols, c => {
const comparer = Math.max(...this.data.map(d => String(d[c.field]).length));
});
// I then print the alpha equivalent to the length of the longest field into a hidden
// div and get the width and compare it with the max width based on columns
// i.e. if maxWidth is less than the length of the column then use that, else the div width
Пользовательский интерфейс элемента имеет свойства minWidth и width, но не максимальную ширину. И у них есть хорошая функция автоматической подсказки. Но попытка управлять таблицей оказалась труднее, чем она того стоит, поэтому я создам свой собственный компонент таблицы. Я обнаружил, что другие пошли по этому пути с таблицей Element UI и столкнулись с несколькими неприятностями.
Подводя итог, мне нужно разумно сбалансировать столбцы и обработать переполнение текста, а также показать всплывающую подсказку по элементу, если он частично скрыт.
Вот скрипка, показывающая самую первую проблему переполнения, с которой я столкнулся, когда хотел растянуть последний столбец.
