iview组件的改写

（1）最近工作的时候常常遇到一些改变样式的需求。但是有的组件是iview提供的，在多个地方使用，如果要在某处地方修改它的样式，记得给css样式加上权重,不然会影响其他位置的样式。

比如修改table的高亮样式，和每一行的hover事件的样式：

#modifyelement .ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, tr.ivu-table-row-highlight.ivu-table-row-hover td{
    background-color:#BFEFFF;
}
#modifyelement tr.ivu-table-row-hover td{
    background-color: #BFEFFF;
}

上述代码我在前面加上了#modifyelement这个id，这个样式只会在#modifyelement这个选择器上生效，不会影响到全局。

如果用的是scss之类的模块化css框架，那就更简单了，在对应的父样式之中写入即可。

（2）iview组件中的日历表datePicker的修改

iview封装的日历表组件十分难看，因为它的日历的宽度总是比它上面的input要宽，而且不能进行自适应的改变。如果要使得它变为自适应的话，最好的方法找一个参照的自适应的元素，在onsize事件中以等比例的方式设置它的宽度。

在vue中直接在mounted里面写代码：

mounted(){
    $(window).resize(()=>{
      this.changeDataPickerStyle();
    })
}

changeDataPickerStyle(){
      //ebugger
      $(".datePickerAddTaskDetail .ivu-select-dropdown").css("width","100%");
      let headerSpanWidth=($(".datePickerAddTaskDetail .ivu-select-dropdown").width()-50.16)/7;
      let headerSpanWidthT=($(".datePickerAddTaskDetail .ivu-select-dropdown").width()-25.16)/7;
      $(".datePickerAddTaskDetail .ivu-select-dropdown .ivu-date-picker-cells span").css("width",headerSpanWidthT);
      $(".datePickerAddTaskDetail .ivu-select-dropdown .ivu-date-picker-cells-header span").css("width",headerSpanWidth);
    },