#javascript #vue.js #vuejs2 #html-table #buefy
#язык JavaScript #vue.js #vuejs2 #html-таблица #бодрый
Вопрос:
В таблицах Buefy есть настройка, в которой вы можете выбрать, какие строки выделяются определенным цветом в зависимости от переменной в строке.
:row-class="(row, index) =gt; row.variable === x amp;amp; 'is-info'"gt; и добавление стиля для определенного класса строк:
lt;stylegt; .is-info' { background: #FF8C4B; } Это работает, и я могу выделить все строки с x в качестве их переменных. Но подумайте, есть ли у меня таблица с несколькими переменными X ,Y, Z. И я хочу, чтобы все объекты с переменным значением X были выделены синим цветом, а объекты с Y-красным. Возможно ли это? Кажется, я нигде не могу найти никаких примеров.
Это мой текущий раздел данных на странице vue:
export default { name: "Demo", data: () =gt; { data: () =gt; { return { loading: null, alphabets: [], className:{ 'x': '.bg-danger', 'y': '.bg-success' }, }; Ответ №1:
Вы можете определить карту классов в объекте данных следующим образом:
:row-class="(row, index) =gt; className[row.variable]"gt; data: ()=gt; ({className: { x:'info', y:'primary' z:'warning' }}) Комментарии:
1. Я немного сбит с толку, должен ли я изменить информацию, основной и предупреждение с помощью цветов html?
2. Нет, его следует заменить контекстными классами, такими как bg-primary, bg-info или любым пользовательским классом, который у вас есть/может быть в стиле. Вы даже можете использовать несколько классов
y: 'bg-primary text-light'3. это может быть что-то вроде vue, но должен ли я поместить имя класса {…} внутрь return? данные: () =gt; { возврат { загрузка: ноль, алфавиты: [], имя класса:{ ‘x’: ‘.bg-опасность’, ‘y’: ‘.bg-успех’ }, };
4. Да, вы можете это сделать. Я пропустил фигурные скобки
Ответ №2:
Вот как это можно сделать:
:row-class="(row, index) =gt; row.alphabet === 'x' amp;amp; 'is-x' || row.alphabet === 'y' amp;amp; 'is-y' || row.alphabet === 'z' amp;amp; 'is-z'" а затем оформите его
lt;stylegt; .is-x{ background: #f15462; } .is-y{ background: #f5bb1a; } .is-z{ background: #3bdc5e; } } lt;/stylegt;