Условное форматирование
Условное форматирование позволяет автоматически менять формат ячеек в зависимости от заданных условий и выделять важные данные или тенденции. Оно поддерживает различные условия и варианты форматирования, помогая воспринимать данные более наглядно.
Режим пресетов
Установка
Shell
pnpm add @univerjs/preset-sheets-conditional-formattingShell
npm install @univerjs/preset-sheets-conditional-formattingShell
yarn add @univerjs/preset-sheets-conditional-formattingShell
bun add @univerjs/preset-sheets-conditional-formattingИспользование
TypeScript
import { UniverSheetsConditionalFormattingPreset } from '@univerjs/preset-sheets-conditional-formatting'import UniverPresetSheetsConditionalFormattingEnUS from '@univerjs/preset-sheets-conditional-formatting/locales/en-US'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-conditional-formatting/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, UniverPresetSheetsConditionalFormattingEnUS, ), }, presets: [ UniverSheetsCorePreset(), UniverSheetsConditionalFormattingPreset(), ],})Режим плагинов
Установка
Shell
pnpm add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uiShell
npm install @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uiShell
yarn add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uiShell
bun add @univerjs/sheets-conditional-formatting @univerjs/sheets-conditional-formatting-uiИспользование
TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsConditionalFormattingPlugin } from '@univerjs/sheets-conditional-formatting'import { UniverSheetsConditionalFormattingUIPlugin } from '@univerjs/sheets-conditional-formatting-ui'import SheetsConditionalFormattingUIEnUS from '@univerjs/sheets-conditional-formatting-ui/locale/en-US'import '@univerjs/sheets-conditional-formatting-ui/lib/index.css'import '@univerjs/sheets-conditional-formatting/facade'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( SheetsConditionalFormattingUIEnUS, ), },})univer.registerPlugin(UniverSheetsConditionalFormattingPlugin)univer.registerPlugin(UniverSheetsConditionalFormattingUIPlugin)Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs/sheets-conditional-formatting-ui | UniverSheetsConditionalFormattingUIPlugin | UniverSheetsConditionalFormattingMobileUIPlugin |
Facade API
Полные определения типов Facade API доступны в справочнике FacadeAPI.
Импорт
Примечание о режиме плагинов
Импортировать пакет Facade вручную требуется только в режиме плагинов. В режиме пресетов соответствующий пакет Facade уже подключён, поэтому дополнительный импорт не нужен.
TypeScript
import '@univerjs/sheets-conditional-formatting/facade'Создание правил условного форматирования
Метод FWorksheet.newConditionalFormattingRule() создаёт построитель условного форматирования и возвращает экземпляр FConditionalFormattingBuilder, с помощью которого можно формировать правила условного форматирования цепочкой вызовов методов.
Некоторые методы FConditionalFormattingBuilder:
| Метод | Описание |
|---|---|
| build | Формирует правило условного форматирования |
| copy | Создаёт глубокую копию текущего построителя |
| createCfId | Создаёт идентификатор условного форматирования |
| getRanges | Возвращает область действия текущего условного форматирования |
| setRanges | Задаёт диапазон действия правила условного форматирования |
| setAverage | Задаёт правило условного форматирования по среднему значению |
| setUniqueValues | Задаёт правило условного форматирования для уникальных значений |
| setDuplicateValues | Задаёт правило условного форматирования для повторяющихся значений |
| setRank | Задаёт правило условного форматирования по рангу |
| setIconSet | Задаёт правило условного форматирования с набором значков |
| setColorScale | Задаёт правило условного форматирования с цветовой шкалой |
| setDataBar | Задаёт правило условного форматирования с гистограммой |
| setBackground | Задаёт цвет фона условного форматирования |
| setBold | Определяет, будет ли шрифт условного форматирования полужирным |
| setFontColor | Задаёт цвет шрифта условного форматирования |
| setItalic | Определяет, будет ли шрифт условного форматирования курсивным |
| setStrikethrough | Определяет, будет ли шрифт условного форматирования зачёркнутым |
| setUnderline | Определяет, будет ли шрифт условного форматирования подчёркнутым |
| whenCellEmpty | Задаёт срабатывание правила условного форматирования для пустой ячейки |
| whenCellNotEmpty | Задаёт срабатывание правила условного форматирования для непустой ячейки |
| whenDate | Задаёт срабатывание правила условного форматирования, если дата входит в указанный период |
| whenFormulaSatisfied | Задаёт срабатывание правила условного форматирования, если результат вычисления формулы равен true |
| whenNumberBetween | Задаёт срабатывание правила условного форматирования, если число находится между двумя указанными значениями или равно одному из них |
| whenNumberEqualTo | Задаёт срабатывание правила условного форматирования, если число равно указанному значению |
| whenNumberGreaterThan | Задаёт срабатывание правила условного форматирования, если число больше указанного значения |
| whenNumberGreaterThanOrEqualTo | Задаёт срабатывание правила условного форматирования, если число больше указанного значения или равно ему |
| whenNumberLessThan | Задаёт срабатывание правила условного форматирования, если число меньше указанного значения |
| whenNumberLessThanOrEqualTo | Задаёт срабатывание правила условного форматирования, если число меньше указанного значения или равно ему |
| whenNumberNotBetween | Задаёт срабатывание правила условного форматирования, если число не находится между двумя указанными значениями и не равно ни одному из них |
| whenNumberNotEqualTo | Задаёт срабатывание правила условного форматирования, если число не равно указанному значению |
| whenTextContains | Задаёт срабатывание правила условного форматирования, если текст содержит указанное значение |
| whenTextDoesNotContain | Задаёт срабатывание правила условного форматирования, если текст не содержит указанное значение |
| whenTextEndsWith | Задаёт срабатывание правила условного форматирования, если текст заканчивается указанным значением |
| whenTextEqualTo | Задаёт срабатывание правила условного форматирования, если текст совпадает с указанным значением |
| whenTextStartsWith | Задаёт срабатывание правила условного форматирования, если текст начинается с указанного значения |
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a conditional formatting rule that sets the cell format to italic, red background, and green font color when the cell is not empty.const fRange = fWorksheet.getRange('A1:T100')const rule = fWorksheet.newConditionalFormattingRule() .whenCellNotEmpty() .setRanges([fRange.getRange()]) .setItalic(true) .setBackground('red') .setFontColor('green') .build()fWorksheet.addConditionalFormattingRule(rule)Получение правил условного форматирования
FWorksheet.getConditionalFormattingRules()возвращает все правила условного форматирования листаFRange.getConditionalFormattingRules()возвращает все правила условного форматирования диапазона
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()// Get all conditional formatting rules of the active worksheetconst fWorksheet = fWorkbook.getActiveSheet()const rulesOfSheet = fWorksheet.getConditionalFormattingRules()// Get all conditional formatting rules of the range A1:T100const fRange = fWorksheet.getRange('A1:T100')const rulesOfRange = fRange.getConditionalFormattingRules()Удаление правил условного форматирования
Метод FWorksheet.deleteConditionalFormattingRule(cfId) удаляет правило условного форматирования с листа, где cfId — идентификатор правила условного форматирования.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rules = fWorksheet.getConditionalFormattingRules()// Remove the first conditional formatting rulefWorksheet.deleteConditionalFormattingRule(rules[0]?.cfId)Обновление правил условного форматирования
Метод FWorksheet.setConditionalFormattingRule(cfId, rule) обновляет правило условного форматирования на листе, где cfId — идентификатор правила условного форматирования, а rule — новое правило.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()// Create a conditional formatting rule that sets the cell format to italic, red background, and green font color when the cell is not empty.const fRange = fWorksheet.getRange('A1:T100')const rule = fWorksheet.newConditionalFormattingRule() .whenCellNotEmpty() .setRanges([fRange.getRange()]) .setItalic(true) .setBackground('red') .setFontColor('green') .build()fWorksheet.addConditionalFormattingRule(rule)// Modify the first rule to apply to a new rangeconst rules = fWorksheet.getConditionalFormattingRules()const newRuleRange = fWorksheet.getRange('A1:D10')fWorksheet.setConditionalFormattingRule(rules[0]?.cfId, { ...rules[0], ranges: [newRuleRange.getRange()] })Изменение приоритета правил условного форматирования
Метод FWorksheet.moveConditionalFormattingRule(cfId, toCfId, type) изменяет приоритет правила условного форматирования на листе, где cfId — идентификатор перемещаемого правила, toCfId — идентификатор целевого правила, а type задаёт тип перемещения (например, 'before' или 'after').
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getActiveSheet()const rules = fWorksheet.getConditionalFormattingRules()// Move the third rule before the first ruleconst rule = rules[2]const targetRule = rules[0]fWorksheet.moveConditionalFormattingRule(rule?.cfId, targetRule?.cfId, 'before')Очистка всех правил условного форматирования
FWorksheet.clearConditionalFormatRules()удаляет все правила условного форматирования с листа.FRange.clearConditionalFormatRules()удаляет все правила условного форматирования из диапазона.
TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()// Clear all conditional formatting rules of the active worksheetconst fWorksheet = fWorkbook.getActiveSheet()fWorksheet.clearConditionalFormatRules()// Clear all conditional formatting rules of the range A1:T100const fRange = fWorksheet.getRange('A1:T100')fRange.clearConditionalFormatRules()Повторное использование описаний и предпросмотра правил
Для собственных списков импортируйте getRuleDescribe и ConditionalFormattingRulePreview из @univerjs/sheets-conditional-formatting-ui. Передайте полное правило в getRuleDescribe(rule, localeService), а компоненту предпросмотра — только конфигурацию rule.rule. Предпросмотр показывает настроенный вид, не вычисляя значения ячеек. Отображайте его в React-контексте Univer.
CF_PANEL_KEY — ключ встроенной панели для переопределения компонента. IConditionFormattingPanelProps.onEditorExit вызывается при завершении редактирования после отправки, отмены, активации или удаления листа. Он не означает успешное сохранение или закрытие боковой панели.
TSX
import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting'import { LocaleService } from '@univerjs/core'import { ConditionalFormattingRulePreview, getRuleDescribe } from '@univerjs/sheets-conditional-formatting-ui'import { useDependency } from '@univerjs/ui'interface IRuleSummaryProps { rule: IConditionFormattingRule}function RuleSummary({ rule }: IRuleSummaryProps) { const localeService = useDependency(LocaleService) return ( <div> <span>{getRuleDescribe(rule, localeService)}</span> <ConditionalFormattingRulePreview rule={rule.rule} /> </div> )}Насколько полезно это руководство?