2021年3月

最近手上用Element UI的项目有点多,很多像 el-tableel-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组件加一层包装的方案。相对于这种更加麻烦一点,这里就不赘述了。