element-ui多选下拉抖动问题修复

前段时间一直很忙，累到根本不想动。最近恢复正常了，写一下这段时间遇到的问题和修复方法。

element-ui select组件多选或者cascader组件在多选情况下会疯狂抖动

描述：在个别电脑，使用select组件，并且是multiple=true时。或者cascader组件，多选发生所选内容以2行及以上展示的时候，会疯狂抖动。如果自己电脑无法复现，可以调整浏览器缩放比例ctrl加上-号，试试在70% 80% 90%的时候，一般还是容易复现的。我当前的element-ui是2.12.0版本，更高版本是否有这个问题尚不清楚。

解决办法：在element-ui官方github上也有人提这个缺陷，我尝试他们的方法给el-tag样式调整padding、margin，给input设置vertical，均无法完美解决。后来看到有人说是select有一个methods方法有一段调整input高度的代码引起的：

methods: {
    // ...
    resetInputHeight () {
      // ...
      input.style.height = this.selected.length === 0
          ? sizeInMap + 'px'
          : Math.max(tags ? (tags.clientHeight + (tags.clentHeight > sizeInMap ? 6 : 0)) : 0) + 'px'
      // ...
    }
}

而chrome浏览器正好有一个bug：渲染时会给input框高度四舍五入，例如当style.height=16.6px,浏览器会会在16px和17px左右横跳，在视觉上就是疯狂抖动。。。 于是我重写了select组件：

el-select2.vue

<script>
import { Select } from 'element-ui'
export default {
    extends: Select,
    methods: {
        resetInputHeight () {
          // ...
          input.style.height = this.selected.length === 0
              ? sizeInMap + 'px'
              : Math.ceil((Math.max(tags ? (tags.clientHeight + (tags.clentHeight > sizeInMap ? 6 : 0)) : 0, sizeInMap)) / 10) * 10 + 'px'
          // ...
        }
    }
}
<script>

就是把select.vue文件的resetInputHeight方法复制出来重写一下他的这个方法：改写他的height计算方法，Math.max后除以10取整再乘以10,降低它的敏感度。然后在抖动的这个el-select替换为使用el-select2。