Silver Formily Element Plus5.0.1

English

简体中文

English

简体中文

Appearance

Internationalization ​

@silver-formily/element-plus reuses the Element Plus locale configuration. Provide the locale at the application root with ElConfigProvider so regular form components and programmatic overlays such as FormDialog and FormDrawer share the same translations.

Configure a Global Locale ​

Element Plus uses English by default. The following example configures the entire application to use Simplified Chinese:

vue
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { RouterView } from 'vue-router'
</script>

<template>
  <ElConfigProvider :locale="zhCn">
    <RouterView />
  </ElConfigProvider>
</template>

Place ElConfigProvider as close to the application root as possible so all Silver Formily and Element Plus components are inside its scope.

Switch Locales at Runtime ​

Map the active application language to an Element Plus locale object and pass it to ElConfigProvider to switch languages reactively:

vue
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import en from 'element-plus/es/locale/lang/en'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { computed, ref } from 'vue'
import { RouterView } from 'vue-router'

type SupportedLanguage = 'en-US' | 'zh-CN'

const language = ref<SupportedLanguage>('en-US')
const elementLocale = computed(() => language.value === 'zh-CN' ? zhCn : en)

function setLanguage(nextLanguage: SupportedLanguage) {
  language.value = nextLanguage

  // Keeping the document language in sync improves accessibility and
  // provides a fallback locale for programmatic overlays.
  if (typeof document !== 'undefined')
    document.documentElement.lang = nextLanguage
}
</script>

<template>
  <ElConfigProvider :locale="elementLocale">
    <button type="button" @click="setLanguage('zh-CN')">
      中文
    </button>
    <button type="button" @click="setLanguage('en-US')">
      English
    </button>
    <RouterView />
  </ElConfigProvider>
</template>

When using vue-i18n or another internationalization library, map its active language to the corresponding Element Plus locale object and keep <html lang> synchronized.

FormDialog and FormDrawer ​

The default confirm and cancel labels in FormDialog and FormDrawer use the following priority:

  1. okText and cancelText explicitly passed to the current call
  2. el.messagebox.confirm and el.messagebox.cancel from ElConfigProvider
  3. English or Chinese fallback labels selected from the page <html lang>

Configuring the root ElConfigProvider is normally enough for overlay buttons to follow the application language. Override the labels for individual workflows when necessary:

ts
FormDialog({
  title: 'Edit user',
  okText: 'Save',
  cancelText: 'Back',
}, UserForm).open()

FormDrawer({
  title: 'Create user',
  okText: 'Create',
  cancelText: 'Discard',
}, UserForm).open()

See FormDialog and FormDrawer for all available options.

SelectTable ​

The selection summary and clear-selection action in SelectTable follow the current Chinese or English Element Plus locale. Use selectionText and clearSelectionText for other languages or custom product copy:

ts
const selectTableProps = {
  selectionText: '{count} records selected',
  clearSelectionText: 'Clear selected records',
}

TIP

Element Plus provides many additional locale packages. See the Element Plus internationalization guide for import paths and the complete list of supported languages.