element中一些小问题总结

一、标题el-input 添加回车事件

@keyup.enter.native

二、标题el-input同时添加blur和keyup.enter.native会触发两次

@blur='changeData' @keyup.enter.native='$event.target.blur'

三、el-table表格在苹果浏览器上间隔线错位

body .el-table th.gutter {
 display: table-cell !important;
}

body .el-table colgroup.gutter {
  display: table-cell !important;
}

//解决苹果浏览器element错位问题
.el-table__body {
  width: 100%;
  table-layout: fixed !important;
}

四、时间选择器，日期选择器最好添加format和value-format

五、上传组件的action属性不要添加地址，会报跨域

<el-upload action> </el-upload>

六、表单内容不会实时验证

解决方式：一般不会实时验证都是因为动态显示造成的

1、
<el-form-item v-if='isShow' label="测试" prop="test">
        <el-input @change="validateField('test')" v-model="ruleForm.test"></el-input>
</el-form-item>
 
validateField(type) {
      this.$refs.ruleForm.validateField(type);
}

2、
<el-form-item v-show='isShow' label="测试" prop="test" :rules="isShow?[{ required: true, message: '此项为必填项', trigger: 'blur' }]:[]">
        <el-input v-model="ruleForm.test"></el-input>
</el-form-item>