element-ui里面遇到的坑

记录一下element-ui里面的坑

1、关于表单验证

(1) 表单验证时，需要v-model和prop的名字一致。
如下：

<el-form :model="formData" :rules="rules">
	<el-form-item prop="username">
		<el-input v-model="formData.username"></el-input>
	</el-form-item>
</el-form>

<script>
	data () {
		return {
			formData: {
				username: '' // 这里和下面的rules里面的名字要一致
 			},
 			rules: {
				username: [ { required: true, trigger: 'blur' } ]
			}
		}
	}
</script>

(2) 自定义校验规则中必须调用callback()函数

<el-form :model="formData" :rules="rules">
	<el-form-item prop="username">
		<el-input v-model="formData.username"></el-input>
	</el-form-item>
</el-form>

<script>
	data () {
		var validateFun = (rule, value, callback) => {
			if (value) {
				callback(new Error('用户名不能为空'));
			}else {
				callback();// 这里必须要调用callback()函数，参数为空表示通过校验
			}
		};
		return {
			formData: {
				username: '' // 这里和下面的rules里面的名字要一致
 			},
 			rules: {
				username: [ { validator: 'validateFun', trigger: 'blur' } ]
			}
		}
	}
</script>

2、关于el-table中动态隐藏某一列

最近工作中碰到这样一个问题，需要根据不同业务动态显示隐藏几列。使用v-show失效，使用v-if表格顺序会发生变化。百度后解决方法如下：使用v-if的时候同时给每列添加key值。注意key值不能相同。
原因如下：
v-show失效原因：看图就知道了

所以说，压根就没放对地方啊。
v-if失效原因：这块还有点不大明白，百度里面说是因为监视属性发生了改变，触发了beforeUpdate()生命周期函数，使得key(未设置key时都是随机数)发生变化，导致组件的重新渲染。生命周期函数beforeUpdate中加入this.$nextTick(()=>{ this.$refs.myTable.doLayout() })。据说也可以解决这个问题，暂时未测试。

3、el-table出现竖向滚动条的时候表头和内容不对齐

当表格内容过多的时候，通常会出现横向和竖向滚动条，此时当拖动横向滚动条到最右边时，由于滚动条的宽度，会导致表头和内容不对齐，这时可以借助el-table预留的th元素进行设置，将其宽度设置为滚动条宽度即可，注意由于el-table借助了col和colgroup控制列宽，所以需要对col进行宽度设置：

/* 全局设置 */
body .el-table th.gutter {
  display: table-cell !important;
}
.el-table {
  th.gutter,
  colgroup.gutter {
    display: block !important;
    width: 17px !important
  }
}

持续更新…