element-ui和iview中select组件value的区别

今天将页面中的下拉框由element-ui的el-select，改成了iview的Select，然后控制台报错，
Invalid prop: type check failed for prop “value”. Expected String or number, got null.
意思是value应该是string或者number类型的，现在却给了null，查看了iview中Select的API，

但是在select的option遍历时，遍历的数组中有null

stateOptions: [
  {value: null, label: '全部'},
  {value: 0, label: '失败'},
  {value: 1, label: '成功'},
  ],

后面我改回el-select就不报错了，查看Api，多了一个object，null在js被认为是object类型的，所以el-select可以。

下面想着更改el-select的样式，它的高度默认是40px，iview的是32px，看着很不协调，在开发工具里发现控制select高度的主要el-input__inner类

在style修改el-input__inner，不起作用，加上!important也一样，查资料发现，elementUI的样式是定义在全局中，我们使用scoped时，
局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式）

.el-input__inner{
	height:32px !important
}

解决方案有两种，一种是去掉scoped标签，为了避免影响其他的组件，可以给父元素加一个class或者id，在其里面写入样式，

.selectPlat{ //父元素
	.el-input__inner { 
		 height:32px; 
	 } 
}

第二中是深度选择器，当 style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。对于某些子元素，css样式需要依赖父元素，比如width：100%，这时需要用到深度选择器 >>> ，在sass或者less等预处理器下，用/deep/

.ivu-form-item{
  /deep/.el-input__inner{
    height: 32px;
  }
}

这样就可以改变el-select的样式了。
相关文章：https://blog.csdn.net/xiazeqiang2018/article/details/81190275