Element UI修改组件默认参数的方法

最近手上用Element UI的项目有点多，很多像 el-table、el-pagination这样覆盖默认参数要写一大堆的组件，复制粘贴虽然很方便。但如果要统一修改某个属性，比如给el-dialog对话框都加一个禁用点击遮罩关闭窗口的功能，搜索起来一个一个添加就还是很吃力。

其实这些默认参数都是可以在注入Vue前批量修改的：

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

function changeDefault (e, p, v) {
  Element[e].props[p].default = v
}
// 对话框默认都附加到body上，没有层级问题
changeDefault('Dialog', 'appendToBody', true)
// 禁用点击遮罩关闭对话框
changeDefault('Dialog', 'closeOnClickModal', false)
// 修改分页区域的默认显示顺序
changeDefault('Pagination', 'layout', '->,total,prev,pager,next,jumper,sizes')
// 修改分页区域每页显示几行的默认选项
changeDefault('Pagination', 'pageSizes', () => [30, 50, 100])
// 修改完再注入到Vue里面
Vue.use(Element)

注意一下格式！
第一个参数“组件名称”的首字母大写！
第二个参数“属性名”需要把“-”连接的格式修改成驼峰格式！
不然……会报错！！
第三个参数“属性值”为Array或者Object时，尽量用函数返回的形式！这个地方有一个警告信息，原因的话经常写Vue的估计都已经烂熟于心了。

另外，如果你修改了Element UI组件的默认值，最好在项目文档的显著位置注明一下哦！不然，后面接手的人，会惊叹于你那简单的标签格式的。

当然，还有一种自己给Element UI组件加一层包装的方案。相对于这种更加麻烦一点，这里就不赘述了。