element-ui项目全局配置某个组件的默认属性

这篇博客分享了如何在Vue.js项目中全局配置Element UI的el-upload组件,以批量添加请求头的model参数,避免在每个页面手动添加的工作量。作者通过在utils文件夹创建uploadConfig.js,并导出配置后的Element UI,然后在main.js中引入,实现了这一目标。此外,还提到类似的方法可以应用于其他组件,如Dialog组件的全局配置。
摘要由CSDN通过智能技术生成

这两天遇到了一个需求,就是给项目中所有上传 el-upload 组件,在请求头里添加一个model参数,参数值就取当前页面的路由router的hash。
因为项目中用到的el-upload 地方比较多,用法基本和官方文档一致:

 <el-form-item :label="$t('bpa_mainDocument')" required>
          <el-upload
            :action="action"
            :on-success="handlerFileUploadSuccess"
            :on-error="handlerFileUploadError"
            :before-upload="handlerFileUploadBefore"
            :show-file-list="false"
          >
            <el-button size="mini" type="primary">
              {{ $t('bpa_clickUpload') }}
            </el-button>
          </el-upload>
        </el-form-item>

官方文档:
在这里插入图片描述要是一个一个加的话,每一处都要加一个 headers,整个项目有80多个页面需要加,这样耗时耗力,还容易加漏,加完了,每一处还得测一遍,保证加上,工作量太大了,于是就想了,能不能全局配置一次,批量处理,于是就处理成下面的写法了:
首先在utils文件夹里,新建一个.js文件,我建了uploadConfig.js
在这里插入图片描述uploadConfig.js的内容:

// 全局 配置 upload 组件属性
import ElementUI from 'element-ui';
// model 公共参数
let modelInterface = ''
modelInterface = localStorage.getItem('CommonInterface')
ElementUI.Upload.props.headers.default = {
  model: modelInterface ? modelInterface : ''
}
export default ElementUI

然后在man.js里引入,就可以了:

import './utils/uploadConfig' //引入upload组件属性全局配置方法

在页面调用的结果如下:
在这里插入图片描述这样在每处使用上传组件的接口,请求头里都加上了model参数。

类似的,其他组件也可以这样配置,例如:
1.element-ui dialog组件 怎么全局配置close-on-click-modal默认值为false?

import Vue from 'vue'
import Element from 'element-ui'
 
//全局修改默认配置
Element.Dialog.props.closeOnClickModal.default=false;
console.info(Element.Dialog);
Vue.use(Element)

注意点,就是点到属性后,再 .default,不然不生效,这个是element ui 自己封装的语法。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值