记录一下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
}
}
持续更新…