元素 UI 中文分页而非英文分页

Question

我开始使用非常好的 Element UI 组件，当我尝试使用

在我的项目中添加分页组件时

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
</el-pagination>

中文显示的文字是这样的：

他们的 JSFiddle sample, but it's not happening on their website 也会发生这种情况。

你知道我怎么用英文吗？

Answer 1

只需添加

<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

和

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>

来源： https://element.eleme.io/#/en-US/component/i18n#import-via-cdn

还建议您在生产环境中使用特定版本的 unpkg。您可以通过在浏览器中加载 url（不带前导 //）然后复制重定向的 url.

来找到最新版本

Answer 2

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en'
import App from './App.vue'

Vue.use(ElementUI, { locale })

new Vue({
  el: '#app',
  render: h => h(App)
})

http://element.eleme.io/#/en-US/component/i18n

Answer 3

'Internationalization': https://element.eleme.io/#/en-US/component/i18n

Element默认语言为中文。如果您想使用其他语言，则需要进行一些国际化配置。

如果您要完全导入 Element：（在您的入口文件中，通常可以在 src > main.js 中找到，如下所示进行配置）

import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

但是如果您要导入元素 on-demand 而不是在整个应用程序中：

// Here we are importing only the Button and Select component from Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

重要提示：中文语言包是默认导入的，即使您使用的是其他语言。但是使用 webpack 提供的 NormalModuleReplacementPlugin 你可以替换默认的语言环境：在您的 webpack.config.js 文件中

{
  plugins: [
   new webpack.NormalModuleReplacementPlugin(/element-ui[\/\]lib[\/\]locale[\/\]lang[\/\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
}

Answer 4

如果您已经按照建议设置了语言环境，这也可能是由于捆绑不一致造成的：

您的打包器可能会内联 element-ui/locale 导入
您的捆绑器可能会将 element-ui 导入视为 external
因此，您在文件的第二个副本上而不是在元素 UI 本身
Element-ui 然后从它自己的副本中读取并忽略你的

（有关解决此类捆绑问题的真实 PR，请参阅 https://github.com/3YOURMIND/kotti/pull/264）

元素 UI 中文分页而非英文分页

Element UI Pagination in Chinese instead of English

vue.js

vuejs2

vue-component

chinese-locale