Как выделять данные в столбце таблицы различными цветами?

Question

[Snowyyy]

Есть таблица, в ней есть столбец "Процесс", в этом столбец возможны значения "Ожидание", "Работа", "Завершено". Как сделать, чтобы "Ожидание" выделялось желтым цветом, "Работа" зеленым, а "Завершено" синим?

Comments

[Михаил Р.]

Показывайте код этого "слова" и родительского элемента (какие классы у них и структура). Без контекста, пока универсальное решение - js.

[Евгений Залецкий]

Михаил Р., ну сделать проверку слова 3 условия и цвет тогда этого залива. ЖС в помощь

[Ankhena]

Нормальным был бы вариант, если бы из БД приходил какой-нибудь data-атрибут или класс. А вы бы потом стилизовали по нему как хочется.

Вариант хуже: с помощью js проверяете слово, задаете класс или тот же data-.

[Snowyyy]

Нашёл в "element-plus", вот такую тему

<template #default="scope">
                <el-tag
                    :type="scope.row.workflow === 'Ожидание' ? 'warning' : 'success' "
                    disable-transitions
                >{{ scope.row.workflow }}
                </el-tag>
            </template>

Здесь получается, ожидание принимает оранжевый цвет, а все остальные зелёный зелёный цвет. Может будут подсказканьки, как прописать, для каждого условия цвет, просто не соображаю. Или это задание? В общем если кто-то знает помогите, плизззз.

[0xD34F]

Snowyyy, почему element-plus не был упомянут в тексте вопроса?

[Snowyyy]

0xD34F, Потому что нашёл позже, чем задал вопрос

[0xD34F]

Snowyyy, зачем вы лжёте?

Answer 1

[0xD34F]

Определить классы для выделения текста:

.waiting { background: yellow; }
.working { background: green; }
.completed { background: blue; }

Определить, какому тексту какой класс соответствует:

const highlight = {
  'Ожидание': 'waiting',
  'Работа': 'working',
  'Завершено': 'completed',
};

Дальше остаётся эти классы назначить кому надо.

Класс получает элемент внутри ячейки:

<el-table-column label="Процесс">
  <template #default="{ row: { process } }">
    <span :class="highlight[process]">{{ process }}</span>
  </template>
</el-table-column>

Или, класс получает сама ячейка таблицы:

const cellClassName = ({ column, row }) =>
  column.property === 'process'
    ? (highlight[row.process] ?? '')
    : '';

<el-table
  :cell-class-name="cellClassName"
  ...
>

Comments

[Snowyyy]

Спасибо