1. 引入的css文件路徑變了

原來是：

  import 'element-ui/lib/theme-default/index.css'

現(xiàn)在需要修改成：

  import 'element-ui/lib/theme-chalk/index.css'

2. 樣式引入的優(yōu)先級問題

之前遇到這樣一個問題帖努，有的組件樣式需要進行定制覆蓋，于是就在組件里面用css scoped進行了同類名的樣式替換唉侄，這樣在開發(fā)環(huán)境下效果是符合預期的，但是打包編譯后川队，優(yōu)先級就變了廉涕。于是發(fā)現(xiàn)是在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，例如

<el-input
  icon="search">
</el-input>

現(xiàn)在的話鸠澈，這樣寫是不生效的：

可以通過prefix-icon 和 suffix-icon 屬性在 input 組件首部和尾部增加顯示圖標柱告，也可以通過 slot 來放置圖標。

所以如果你在項目中的input里用到了icon的屬性笑陈，需要改成prefix-icon 或 suffix-icon：

<el-input
    suffix-icon="el-icon-search">
</el-input>

但是button組件就還是可以使用icon屬性末荐，但需要傳入完整的圖標類名：

  <el-button type="primary" icon="el-icon-search">搜索</el-button>

原因是：
為了方便使用第三方圖標，Button 的 icon 屬性新锈、Input 的 prefix-icon 和 suffix-icon 屬性、Steps 的 icon 屬性現(xiàn)在需要傳入完整的圖標類名

4. modal的變化

之前給不需要寬度的modal設了width: auto;眶熬，這樣如果里面內(nèi)容為空的時候基本沒有寬度妹笆，更新后，如果沒有內(nèi)容娜氏，默認會鋪滿整個屏幕拳缠。

5. NavMenu 導航菜單

原來的menu是有兩個樣式供選擇的，theme有兩個可選值light, dark贸弥，現(xiàn)在沒有這個屬性了窟坐，默認就是chalk主題的白色，如果想要定制，需要另外設置哲鸳。

但是這樣設置會有弊端臣疑，如果項目經(jīng)過定制樣式改過主題顏色，那么這里就需要進行單獨設置徙菠，而且還僅支持 hex 格式讯沈，這就需要計算出來顏色的具體值，而不能通過scss變量來控制婿奔。

6. slot-scope

這其實是vue在2.5.0里的變化
把scope換成了slop-scope
所以在element里面升級后缺狠，也把相應的用到scope的地方做修改就行了

7. checkbox change事件的參數(shù)變化

所以，原來1.0判斷change函數(shù)里面是這么寫的:

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這個樣式文件

  <el-table class="table" :data="pictureBookData" :header-cell-style="overrideHeaderStyle" >

隱藏-->顯示時的格局縮放的bug：
可以結(jié)合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切換時或者其他觸發(fā)條件需要改變值

   this.$store.commit('changeDoLayoutValue', value)
  

ps:會存在值變化了 但doLayout（）未起作用挤茄，可以通過延遲執(zhí)行解決

9、dialog 不存在size屬性了 改width="80%" ......

10冰木、日期選擇器

• 日期選擇器有了value-format屬性 value-format=“yyyy-MM-dd”

• 去掉了placeholder屬性 增加start-placeholder="開始日期" end-placeholder="結(jié)束日期"

• 初始化值只需 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"

  ## 上個月的快捷實現(xiàn)
  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]);
         }
       }]
     },
    }
  }
  

贊贊哇.png