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

Как настроить автоматическое окрашивание значений в столбце "Процесс" таблицы в разные цвета в зависимости от текста: желтым для "Ожидание", зеленым для "Работа" и синим для "Завершено"?
  • 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; 

При выполнении данного запроса, значения столбца "Процесс" будут автоматически окрашены в желтый, зеленый или синий цвет в зависимости от текста.
Определить классы для выделения текста: <br/> <br/> <pre><code class="css">.waiting { background: yellow; }
.working { background: green; }
.completed { background: blue; }</code></pre> <br/> Определить, какому тексту какой класс соответствует: <br/> <br/> <pre><code class="javascript">const highlight = {
  'Ожидание': 'waiting',
  'Работа': 'working',
  'Завершено': 'completed',
};</code></pre> <br/> Дальше остаётся эти классы назначить кому надо. <br/> <br/> <a href="https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGVsLXRhYmxlIDpkYXRhPVwiZGF0YVwiIHN0eWxlPVwid2lkdGg6IDEwMCVcIj5cbiAgICA8ZWwtdGFibGUtY29sdW1uIHByb3A9XCJpZFwiIGxhYmVsPVwiI1wiIC8+XG4gICAgPGVsLXRhYmxlLWNvbHVtbiBsYWJlbD1cItCf0YDQvtGG0LXRgdGBXCI+XG4gICAgICA8dGVtcGxhdGUgI2RlZmF1bHQ9XCJ7IHJvdzogeyBwcm9jZXNzIH0gfVwiPlxuICAgICAgICA8c3BhbiA6Y2xhc3M9XCJbICdwcm9jZXNzJywgaGlnaGxpZ2h0W3Byb2Nlc3NdIF1cIj57eyBwcm9jZXNzIH19PC9zcGFuPlxuICAgICAgPC90ZW1wbGF0ZT5cbiAgICA8L2VsLXRhYmxlLWNvbHVtbj5cbiAgPC9lbC10YWJsZT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgbGFuZz1cInRzXCIgc2V0dXA+XG5jb25zdCBkYXRhID0gW1xuICAn0J7QttC40LTQsNC90LjQtScsICfQoNCw0LHQvtGC0LAnLCAnJywgJ9Ce0LbQuNC00LDQvdC40LUnLFxuICAn0JfQsNCy0LXRgNGI0LXQvdC+JywgJ9CW0J7Qn9CQJywgJ9Cg0LDQsdC+0YLQsCcsXG5dLm1hcCgobiwgaSkgPT4gKHsgaWQ6IC1+aSwgcHJvY2VzczogbiB9KSk7XG5cbmNvbnN0IGhpZ2hsaWdodCA9IHtcbiAgJ9Ce0LbQuNC00LDQvdC40LUnOiAnd2FpdGluZycsXG4gICfQoNCw0LHQvtGC0LAnOiAnd29ya2luZycsXG4gICfQl9Cw0LLQtdGA0YjQtdC90L4nOiAnY29tcGxldGVkJyxcbn07XG48L3NjcmlwdD5cblxuPHN0eWxlPlxuLnByb2Nlc3Mge1xuICBjb2xvcjogb3JhbmdlO1xuICBmb250OiBib2xkIDI0cHggbW9ub3NwYWNlO1xufVxuXG4ud2FpdGluZyB7IGJhY2tncm91bmQ6IHllbGxvdzsgfVxuLndvcmtpbmcgeyBiYWNrZ3JvdW5kOiBncmVlbjsgfVxuLmNvbXBsZXRlZCB7IGJhY2tncm91bmQ6IGJsdWU7IH1cbjwvc3R5bGU+XG4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7fVxufSIsInRzY29uZmlnLmpzb24iOiJ7XG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcbiAgICBcInR5cGVzXCI6IFtcImVsZW1lbnQtcGx1cy9nbG9iYWwuZC50c1wiXSxcbiAgICBcImFsbG93SW1wb3J0aW5nVHNFeHRlbnNpb25zXCI6IHRydWUsXG4gICAgXCJhbGxvd0pzXCI6IHRydWUsXG4gICAgXCJjaGVja0pzXCI6IHRydWVcbiAgfSxcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IDMuM1xuICB9XG59XG4iLCJfbyI6e319" rel="nofollow">Класс получает элемент внутри ячейки</a> : <br/> <br/> <pre><code class="html">&lt;el-table-column label="Процесс"&gt;
  &lt;template #default="{ row: { process } }"&gt;
    &lt;span :class="highlight[process]"&gt;{{ process }}&lt;/span&gt;
  &lt;/template&gt;
&lt;/el-table-column&gt;</code></pre> <br/> <a href="https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGVsLXRhYmxlIDpkYXRhPVwiZGF0YVwiIDpjZWxsLWNsYXNzLW5hbWU9XCJjZWxsQ2xhc3NOYW1lXCIgc3R5bGU9XCJ3aWR0aDogMTAwJVwiPlxuICAgIDxlbC10YWJsZS1jb2x1bW4gcHJvcD1cImlkXCIgbGFiZWw9XCIjXCIgLz5cbiAgICA8ZWwtdGFibGUtY29sdW1uIHByb3A9XCJwcm9jZXNzXCIgbGFiZWw9XCLQn9GA0L7RhtC10YHRgVwiIC8+XG4gIDwvZWwtdGFibGU+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IGxhbmc9XCJ0c1wiIHNldHVwPlxuY29uc3QgZGF0YSA9IFtcbiAgJ9Ce0LbQuNC00LDQvdC40LUnLCAn0KDQsNCx0L7RgtCwJywgJycsICfQntC20LjQtNCw0L3QuNC1JyxcbiAgJ9CX0LDQstC10YDRiNC10L3QvicsICfQltCe0J/QkCcsICfQoNCw0LHQvtGC0LAnLFxuXS5tYXAoKG4sIGkpID0+ICh7IGlkOiAtfmksIHByb2Nlc3M6IG4gfSkpO1xuXG5jb25zdCBoaWdobGlnaHQgPSB7XG4gICfQntC20LjQtNCw0L3QuNC1JzogJ3dhaXRpbmcnLFxuICAn0KDQsNCx0L7RgtCwJzogJ3dvcmtpbmcnLFxuICAn0JfQsNCy0LXRgNGI0LXQvdC+JzogJ2NvbXBsZXRlZCcsXG59O1xuXG5jb25zdCBjZWxsQ2xhc3NOYW1lID0gKHsgY29sdW1uLCByb3cgfSkgPT5cbiAgY29sdW1uLnByb3BlcnR5ID09PSAncHJvY2VzcydcbiAgICA/IChgcHJvY2VzcyAke2hpZ2hsaWdodFtyb3cucHJvY2Vzc10gPz8gJyd9YClcbiAgICA6ICcnO1xuPC9zY3JpcHQ+XG5cbjxzdHlsZT5cbi5wcm9jZXNzIHtcbiAgY29sb3I6IG9yYW5nZTtcbiAgZm9udDogYm9sZCAyNHB4IG1vbm9zcGFjZTtcbn1cblxuLndhaXRpbmcgeyBiYWNrZ3JvdW5kOiB5ZWxsb3c7IH1cbi53b3JraW5nIHsgYmFja2dyb3VuZDogZ3JlZW47IH1cbi5jb21wbGV0ZWQgeyBiYWNrZ3JvdW5kOiBibHVlOyB9XG48L3N0eWxlPlxuIiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJ0c2NvbmZpZy5qc29uIjoie1xuICBcImNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogXCJFU05leHRcIixcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXG4gICAgXCJtb2R1bGVcIjogXCJFU05leHRcIixcbiAgICBcIm1vZHVsZVJlc29sdXRpb25cIjogXCJCdW5kbGVyXCIsXG4gICAgXCJ0eXBlc1wiOiBbXCJlbGVtZW50LXBsdXMvZ2xvYmFsLmQudHNcIl0sXG4gICAgXCJhbGxvd0ltcG9ydGluZ1RzRXh0ZW5zaW9uc1wiOiB0cnVlLFxuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxuICAgIFwiY2hlY2tKc1wiOiB0cnVlXG4gIH0sXG4gIFwidnVlQ29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcInRhcmdldFwiOiAzLjNcbiAgfVxufVxuIiwiX28iOnt9fQ==" rel="nofollow">Или, класс получает сама ячейка таблицы</a> : <br/> <br/> <pre><code class="javascript">const cellClassName = ({ column, row }) =&gt;
  column.property === 'process'
    ? (highlight[row.process] ?? '')
    : '';</code></pre> <br/> <pre><code class="html">&lt;el-table
  :cell-class-name="cellClassName"
  ...
&gt;</code></pre>
Похожие вопросы