[ElementUI] 修改默认语言为英文 el-table filter 筛选

来源:简书 分类: 文章浏览史 发布时间:2021-02-24 17:26:54 最后更新:2021-02-24 浏览:269
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-02-24 17:26:54

写这篇文章的起因是用el-table的filter多选框下面的中文无法修改为英文。截图解释

el-table的属性里没有一个地方可以修改这里的“筛选”“重置”为英文

因此我找到了github下的这个issue #5705
image.png

顺腾摸瓜找到了https://element.eleme.cn/#/zh-CN/component/i18n#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian, 早前看过,只是没用上,又忘记有这个功能。

我用的是vue-cli3 +typescript, 注意下@vue/cli-service 已经内置了webpack 服务, 所以如果你也是用vue-cli ,那么网络上说要修改webpack.config.js的地方现在要变成修改vue.config.js, 因为用webpack.config.js是单独搭建webpack的时候才用的,也就是不是用vue-cli.
关于vue-cli 与webpack的关系可以看vue官方解释

如果你用vue-cli3,而且只需要切换成英文, 你可以用以下步骤操作:

  1. 声明local模块(如果你用typescript才需要
    请留意下这个issue https://github.com/ElemeFE/element/issues/9084,但不影响你按照我的步骤操作
    在src下创建一个shims-element-ui.d.ts , 有人说这个名字无关紧要(看这里),但是实践证明,typescript会拿shimes-后, .d.ts前, 也就是element-ui 这个来做点关联,所以你最好把这个文件命名为shims-element-ui.d.ts
    image.png

shims-element-ui.d.ts 里面的内容是

declare module 'element-ui/lib/locale/lang/en' {
}

2.修改main.ts 在vue中注入local插件,关于vue.use()的使用场景可以参考这里

import './class-component-hooks'
import Vue from 'vue'
import  * as locale from 'element-ui/lib/locale/lang/en'
//import ...

//Vue.use...
Vue.use(ElementUI, {locale})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

但是这样修改还是没有作用,因为官网给出了一句话


image.png

所以还要修改webpack的配置

  1. 修改 vue.config.js, 添加webpack的配置, 关于vue cli的webpack的配置参考这里
//const...
const webpack = require('webpack');

module.exports = {
    publicPath: process.env.VUE_APP_API_CONTEXT_PATH,
    devServer: {
      ...
    }
//...
    configureWebpack: config=>{
        config.plugins.push(new webpack.NormalModuleReplacementPlugin(/element-ui\/lib\/locale\/lang\/zh-CN/, 'element-ui/lib/locale/lang/en'))

    }
}

到此,就可以重新启动项目了,成功修改成英文了。


image.png
php技术微信