ElementUI 组件设置全局默认值

最近碰到个需求,要求把管理系统的所有 el-select 元素都添加 clearable 属性。整个管理系统估计有几百个页面,el-select 的数量更是不计其数,如果用传统方法一个一个的找然后添加属性,绝对是不现实的。

实际上可以通过设置 ElSelect.props 的默认值,来实现全局添加默认值的功能。另外,这个方法对其他所有组件都适用(未测试)

// 默认下拉框都可以
// * 显示清除按钮
// * 输入值
// * 多选
Object.defineProperties(Element.Select.props, {
  'clearable': {
    value: { default: true, type: Boolean }
  }, 'filterable': {
    value: { default: true, type: Boolean }
  }, 'multiple': {
    value: { default: true, type: Boolean }
  }
})

这里通过 Object.defineProperties来修改 Element.Select.props 的对应属性的默认值,注意除了修改 default 这个属性外,还需要加上 type 来补全变量类型,如果不加的话可能会出现类型错误或者其他意料外的结果。

另外博主用 Element.Select.props.clearable.default = true 这种方式初始化默认值并没有生效,所以才改用 defineProperties 的方法。

你可能感兴趣的:(Vue,前端,elementui,javascript,前端)