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

原來是：

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

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

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

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

之前遇到這樣一個(gè)問題，有的組件樣式需要進(jìn)行定制覆蓋，于是就在組件里面用css scoped進(jìn)行了同類名的樣式替換，這樣在開發(fā)環(huán)境下效果是符合預(yù)期的，但是打包編譯后，優(yōu)先級就變了。于是發(fā)現(xiàn)是在main.js引入文件路徑順序的問題，之前一度以為不需要順序，但其實(shí)還是有影響的。

原來的配置：

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這個(gè)屬性指定icon，例如

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

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

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

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

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

但是button組件就還是可以使用icon屬性，但需要傳入完整的圖標(biāo)類名：

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

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

4. modal的變化

之前給不需要寬度的modal設(shè)了width: auto;，這樣如果里面內(nèi)容為空的時(shí)候基本沒有寬度，更新后，如果沒有內(nèi)容，默認(rèn)會(huì)鋪滿整個(gè)屏幕。

5. NavMenu 導(dǎo)航菜單

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

但是這樣設(shè)置會(huì)有弊端，如果項(xiàng)目經(jīng)過定制樣式改過主題顏色，那么這里就需要進(jìn)行單獨(dú)設(shè)置，而且還僅支持 hex 格式，這就需要計(jì)算出來顏色的具體值，而不能通過scss變量來控制。

6. slot-scope

這其實(shí)是vue在2.5.0里的變化
把scope換成了slop-scope
所以在element里面升級后，也把相應(yīng)的用到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的默認(rèn)樣式 及很多tabpane時(shí)隱藏-->顯示時(shí)的格局縮放的bug

可以封裝一個(gè)樣式文件

  export default {
      methods:{
        overrideHeaderStyle(){
            return {"background":'#eef1f6','color':'#1f2d3d'
         }
      }
    }

然后引用到table的文件里mixins這個(gè)樣式文件

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

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

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

ps:會(huì)存在值變化了 但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"

  ## 上個(gè)月的快捷實(shí)現(xiàn)
  data(){
     retutn{
       pickerOptions:{
         shortcuts:[{
         text:'上個(gè)月',
         onClick(picker){
           //picker.value 當(dāng)前篩選框日期
           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