1. 引入的css文件路径变了
原来是：
import 'element-ui/lib/theme-default/index.css'
现在需要修改成：
import 'element-ui/lib/theme-chalk/index.css'
2. 样式引入的优先级问题
之前遇到这样一个问题，有的组件样式需要进行定制覆盖，于是就在组件里面用css scoped进行了同类名的样式替换，这样在开发环境下效果是符合预期的，但是打包编译后，优先级就变了。于是发现是在main.js引入文件路径顺序的问题，之前一度以为不需要顺序，但其实还是有影响的。
原来的配置：
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
修改后的：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue' //这里要把App的引用顺序放到最后
Vue.use(ElementUI)
3. Icon的变化
原来在input组件中可以用icon这个属性指定icon，例如
现在的话，这样写是不生效的：
可以通过prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
所以如果你在项目中的input里用到了icon的属性，需要改成prefix-icon 或 suffix-icon：
但是button组件就还是可以使用icon属性，但需要传入完整的图标类名：
搜索
原因是：
为了方便使用第三方图标，Button 的 icon 属性、Input 的 prefix-icon 和 suffix-icon 属性、Steps 的 icon 属性现在需要传入完整的图标类名
4. modal的变化
之前给不需要宽度的modal设了width: auto;，这样如果里面内容为空的时候基本没有宽度，更新后，如果没有内容，默认会铺满整个屏幕。
5. NavMenu 导航菜单
原来的menu是有两个样式供选择的，theme有两个可选值light, dark，现在没有这个属性了，默认就是chalk主题的白色，如果想要定制，需要另外设置。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| background-color | 菜单的背景色（仅支持 hex 格式） | string | — | #ffffff |
| text-color | 菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF |
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string | — | #409EFF |
但是这样设置会有弊端，如果项目经过定制样式改过主题颜色，那么这里就需要进行单独设置，而且还仅支持 hex 格式，这就需要计算出来颜色的具体值，而不能通过scss变量来控制。
6. slot-scope
这其实是vue在2.5.0里的变化
把scope换成了slop-scope
所以在element里面升级后，也把相应的用到scope的地方做修改就行了
7. checkbox change事件的参数变化
| 版本 | 事件名称 | 说明 | 回调参数 |
|---|---|---|---|
| 1.0 | change | 当绑定值变化时触发的事件 | event事件对象 |
| 2.0 | change | 当绑定值变化时触发的事件 | 更新后的值 |
所以，原来1.0判断change函数里面是这么写的:
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
this.isIndeterminate = false;
},
2.0是这样的：
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
8、table的默认样式 及很多tabpane时隐藏-->显示时的格局缩放的bug
可以封装一个样式文件
export default {
methods:{
overrideHeaderStyle(){
return {"background":'#eef1f6','color':'#1f2d3d'
}
}
}
然后引用到table的文件里mixins这个样式文件
隐藏-->显示时的格局缩放的bug：
可以结合vuex技术解决 + table的doLayout方法
-
store/doLayout/index.js:
const state = { doLayoutValue: false } const mutations = { changeDoLayoutValue(state,value){ state.doLayoutValue = value } } const actions = {} export default { state, mutations, actions } -
table页面： table加上ref属性
import {mapState} from 'vuex' computed:{ ...mapState({ layoutValue :state => state.doLayout.doLayoutValue }), }, watch:{ layoutValue(){ if( this.$refs.tableRefName) { this.$refs.tableRefName.doLayout() } } } -
tabpane切换时或者其他触发条件需要改变值
this.$store.commit('changeDoLayoutValue', value)
ps:会存在值变化了 但doLayout（）未起作用，可以通过延迟执行解决
9、dialog 不存在size属性了 改width="80%" ......
10、日期选择器
日期选择器有了value-format属性 value-format=“yyyy-MM-dd”
去掉了placeholder属性 增加start-placeholder="开始日期" end-placeholder="结束日期"
初始化值只需 this.form.dataRange = [startTime,endTime] //yyyy-MM-dd形式
-
值变化，@change事件
if (dateRange){ vm.startDate = dateRange[0]; vm.endDate = dateRange[1]; }else { vm.startDate = ''; vm.endDate = ''; } -
:picker-options="pickerOptions"
## 上个月的快捷实现 data(){ retutn{ pickerOptions:{ shortcuts:[{ text:'上个月', onClick(picker){ //picker.value 当前筛选框日期 var nowdays = (picker.value && picker.value[0]) || new Date(); var nowyear = nowdays.getFullYear(); var nowmonth = nowdays.getMonth(); if(nowmonth==0){ nowmonth = 12; nowyear = nowyear -1; } if(nowmonth<10){ nowmonth = "0"+nowmonth } let larststart = nowyear +'-'+nowmonth +'-'+'01'; var myDate = new Date(nowyear,nowmonth,0); let larstend = nowyear + "-" + nowmonth + "-" + myDate.getDate(); picker.$emit('pick', [larststart, larstend]); } }] }, } }
