Как настроить автоматическое окрашивание значений в столбце "Процесс" таблицы в разные цвета в зависимости от текста: желтым для "Ожидание", зеленым для "Работа" и синим для "Завершено"?
Для выделения слова "приходящая" цветом из базы данных можно использовать HTML-тег <span> с атрибутом style, указывающим нужный цвет. Например, запрос для выделения слова "приходящая" красным цветом может выглядеть следующим образом: SELECT REPLACE(column_name, 'приходящая', '<span style="color: red;">приходящая</span>') AS colored_text FROM table_name; Для настройки автоматического окрашивания значений в столбце "Процесс" таблицы в разные цвета в зависимости от текста, можно использовать условные операторы CASE и конструкцию <span> со стилями CSS. Пример запроса для задачи: SELECT CASE WHEN Process = 'Ожидание' THEN '<span style="color: yellow;">Ожидание</span>' WHEN Process = 'Работа' THEN '<span style="color: green;">Работа</span>' WHEN Process = 'Завершено' THEN '<span style="color: blue;">Завершено</span>' END AS colored_text FROM table_name; При выполнении данного запроса, значения столбца "Процесс" будут автоматически окрашены в желтый, зеленый или синий цвет в зависимости от текста.
Определить классы для выделения текста:
.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" ... >