项目用了 Element + iView 两个 UI 库
背景
之前刚接手项目的时候就很奇怪，明明 Element 的组件就足够用了，为什么还要引 iView 进来，
后来发现 iView 只用了 日期选择器和分页两个组件。
然后强迫症的我选择用 Element 的 日期选择器和分页组件，发现了莫名的 Bug，日期选择器的年月不显示，分页的 total 不显示，其他的也没去看
刚接手的时候需求都很急，也没时间去研究这两个了，秉承着能用就行的原则，走上了前人的老路。
开始填坑
然后这段时间一直在考虑优化下项目，想着逐步的把 iView 给剥离出去，刚刚今天有个新需求，要用到分页，就试试吧
果不其然， 分页的其他都好使，就是 total 不显示，而且奇怪的是 total 的 dom 都渲染了，就是没值
然后网上一顿搜，都没搜到相关问题
那咋办，只能进源码打 log 了，看看 total 有没有传到组件里去
先去 GitHub 把 Element 的源码下载下来，选了 最新版本的源码
然后在 VS Code 里打开，找到 pagination 对应的源码
element-2.15.6/packages/pagination/src/pagination.js
然后在 266- 276 行，找到 total 组件的源码
Total: {
mixins: [Locale],
render(h) {
return (
typeof this.$parent.total === 'number'
? <span class="el-pagination__total">{ this.t('el.pagination.total', { total: this.$parent.total }) }</span>
: ''
);
}
},
然后开始 log 大法
Total: {
mixins: [Locale],
render(h) {
console.log('this.$parent.total', this.$parent.total)
console.log("this.$parent.total === 'number'", this.$parent.total === 'number')
console.log("this.t('el.pagination.total', { total: this.$parent.total })", this.t('el.pagination.total', { total: this.$parent.total }))
return (
typeof this.$parent.total === 'number'
? <span class="el-pagination__total">{ this.t('el.pagination.total', { total: this.$parent.total }) }</span>
: ''
);
}
},
然后在源码内执行
npm i // 先安装依赖
npm run dist // 打包
打包完成后，在根目录会生成一个 lib 文件夹，这里面就是我们打包好的文件夹
然后先把我们项目里的 element-ui 的 lib 包删掉
node_modules/element-ui/lib
然后把新生成的包复制过去
启动我们的项目，在用到分页组件的页面，看看 log 打出啥来了
此处无图，忘记截图了
this.$parent.total 200
this.$parent.total === 'number' true
this.t('el.pagination.total', { total: this.$parent.total }) 空
OK，从这里就可以看到了，第三个 log 没打出数据，应该是多语言转换的时候，失败了
（从来没想过是多语言的坑！！！）
然后开始瞎猜，我们项目也用了多语言，然后还有 iView 的多语言，是不是有啥冲突啥的
那就去看看项目的 main.js ，看看怎么配的把
然后，看完之后，emmm，对照下官方文档，这一顿操作，语言包根本没引入成功呀（官方默认是中文）
找到问题后，就很顺了，按文档的写法，引入多语言包，成功！
总结
解决这个问题只需要改一行代码，但是这个坑确是留了好久，之前从未想过是多语言导致的一个坑
填坑路漫漫，特此留个纪念！
