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

Как настроить автоматическое окрашивание значений в столбце "Процесс" таблицы в разные цвета в зависимости от текста: желтым для "Ожидание", зеленым для "Работа" и синим для "Завершено"?
  • 25 апреля 2024 г. 9:00
Ответы на вопрос 2
Для выделения слова "приходящая" цветом из базы данных можно использовать 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"
  ...
>
Похожие вопросы