使用element-ui遇到的坑及解决办法

element-ui+vue2的项目比较常见，在使用element-ui会遇到一些设计上感觉不合理的地方，就是所说的坑。持续补充中。。。

1、switch组件的width属性接收number数据类型默认值40

正常情况下是没有什么问题的，但需要作响应式开发的时候，想用vw来实现。实践证明它是支持的，但是开发环境下控制台会有一个vue类型检验警告。可以不处理，要实现vw的效果可以动态去计算需要的宽度值。

2、table表格的自适应时索引列不支持min-width

在要求表格需要自适应的时候，可以给每一列添加min-width属性，它会按照值的百分比去动态计算宽度，但是当索引列使用了type="index"来添加序号的话，设置的min-width是不生效的。解决思路是使用插槽，根据页码和一页的数据个数去计算序号。
{{ (pageNum - 1) * pageSize + scope.$index+1 }}

3、input标签的type=number时默认的一些处理

在做表单校验的时候，往往可以通过input的type属性限制一些输入。当只需要输入0-9的数字而对于一个数字加小数点的情况，它会默认舍弃掉小数点，即是说在输入框中输入122.在el.value是122. 在vue中使用@input="value=String(value).replace(/[^0-9]/g,'')"，其中value是v-modle绑定的值。

4、源码自定义命令v-clickoutside的使用

// 点击空白处隐藏，放在需要的组件上
v-clickoutside="handleClickOutside"
// 导入
import clickoutside from 'element-ui/lib/utils/clickoutside';
// 局部注册
  directives: {
    clickoutside
  },
// 处理逻辑v-show绑定的值
    handleClickOutside() {
      if (this.isExpanded) {
        setTimeout(()=>{
          this.isExpanded = false; 
        },0)    
      }
    }

5、表头居中，各列可以单独居中或左对齐

:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"