定义element上传表单样式

 重新定义上传图片右上角内容

::v-deep .hide {
  .el-upload--picture-card {
    display: none;
  }
}

::v-deep .el-upload-list__item-status-label {
  ::before {
    content: '重新上传';
    color: #fff;
    transform: rotate(0);
  }
  border-radius: 0 0 0 4px;
  background-color: #363636;
  right: 0;
  width: 52px;
  transform: rotate(0)
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-status-label i {
  transform: rotate(0)
}

定义上传一次之后不再展示上传按钮

::v-deep .hide {
  .el-upload--picture-card {
    display: none;
  }
}

表单校验提示位置

::v-deep .el-form-item__error {
  top: 20%;
  left: 82%;
}

自定义表单必填前缀

::v-deep .cardNumber {
  .el-form-item__label {
    &::before {
      content: '*'!important;
      color: #f56c6c!important;
      margin-right: 4px!important;
    }
  }
}

 表单自定义校验

const validateFuntion = (rule, value, callback) => {
  const ruleType = {
    userCount: '用户名',
    passWord: '密码',
    title: '标题',
    price: '价格',
    postage: '运费',
    sendTiem: '发货时间',
    Contact: '客户联系方式',
    logistics: '发货物流',
    cardNumber: '银行卡'
  }
  if (!value) {
    callback(new Error(( ruleType[rule.field] || '') +'不能为空'));
  } else {
    // 输入数字
    const numberTypes = ['price']
    if (numberTypes.some(item => item === rule.field)) {
      if (!/^[0-9]+(\.[0-9]{1,2})?$/.test(value)) {
        callback(new Error(( ruleType[rule.field] || '') +'必须为数字'))
      }
    }
    // 银行卡校验
    if (rule.field === 'cardNumber') {
      if ( !/^(?:\d{16}|\d{19})$/g.test(value)) {
        callback(new Error(( '请填写正确' + ruleType[rule.field] || '') ))
      }

    }
    callback()
  }
}

// 触发条件
 userCount: [{ required: true, validator: validateFuntion, trigger: 'blur' }],