Element-ui 全局默认属性配置

---

前言

在使用Element-ui组件的时候，因为项目不同，总会有一些组件的默认属性值和项目是相反的，就导致每次在使用这个组件的时候需要更改这个属性的值。下面就最近针对Element-ui如何全局配置属性做下记录

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、npm引入

npm引入直接修改main.js，主要是每种控件的默认项不一样，可以通过console.log(ElementUI.Dialog)查看组件默认配置在哪里，然后调整就好。
改了几种默认配置，暂时只发现以下两种

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// ElementUI默认配置
ElementUI.Dialog.props.closeOnClickModal.default = false
ElementUI.Autocomplete.props.triggerOnFocus.default = false
ElementUI.Autocomplete.props.highlightFirstItem.default = true
ElementUI.Table.props.border = { type: Boolean, default: true }
ElementUI.Table.props.highlightCurrentRow = { type: Boolean, default: true }
ElementUI.DatePicker.props.unlinkPanels = { type: Boolean, default: true }
ElementUI.DatePicker.props.startPlaceholder = { type: String, default: '开始日期' }
ElementUI.DatePicker.props.endPlaceholder = { type: String, default: '结束日期' }

二、CDN引入

引入CDN引入后是element-ui抛出的名字是ELEMENT，所以得用这个名称来调整配置。我这里是vue-element-admin的项目，所以直接在public/index.html调整，其余框架应该类似

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.min.js"></script>
<script src="https://unpkg.com/vue-router@3.0.6/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/axios@0.18.1/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<script src="https://unpkg.com/xlsx@0.16.7/dist/xlsx.min.js"></script>
<script>
  // 生产环境禁用debug与devtools
  Vue.config.productionTip = false
  Vue.config.devtools = false
  Vue.config.debug = false
  Vue.config.silent = true
  // 生产环境CDN引入配置element ui全局默认属性
  ELEMENT.Dialog.props.closeOnClickModal.default = false
  ELEMENT.Autocomplete.props.triggerOnFocus.default = false
  ELEMENT.Autocomplete.props.highlightFirstItem.default = true
  ELEMENT.Table.props.border = { type: Boolean, default: true }
  ELEMENT.Table.props.highlightCurrentRow = { type: Boolean, default: true }
  ELEMENT.DatePicker.props.unlinkPanels = { type: Boolean, default: true }
  ELEMENT.DatePicker.props.startPlaceholder = { type: String, default: '开始日期' }
  ELEMENT.DatePicker.props.endPlaceholder = { type: String, default: '结束日期' }
</script>

以上就是今天要讲的内容，本文仅仅简单记录下如何更改Element-ui组件默认属性的方法，主要是分npm和CDN。