elementui升级遇到的问题

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，例如

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

现在的话，这样写是不生效的：

可以通过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 属性现在需要传入完整的图标类名

4. modal的变化

之前给不需要宽度的modal设了width: auto;，这样如果里面内容为空的时候基本没有宽度，更新后，如果没有内容，默认会铺满整个屏幕。

5. NavMenu 导航菜单

原来的menu是有两个样式供选择的，theme有两个可选值light, dark，现在没有这个属性了，默认就是chalk主题的白色，如果想要定制，需要另外设置。

但是这样设置会有弊端，如果项目经过定制样式改过主题颜色，那么这里就需要进行单独设置，而且还仅支持 hex 格式，这就需要计算出来颜色的具体值，而不能通过scss变量来控制。

6. slot-scope

这其实是vue在2.5.0里的变化
把scope换成了slop-scope
所以在element里面升级后，也把相应的用到scope的地方做修改就行了

7. checkbox 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这个样式文件

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

隐藏-->显示时的格局缩放的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]);
         }
       }]
     },
    }
  }
  

赞赞哇.png