基于elementUI来封装的form表单

安装elementUI就不说了，这是封装好的代码，怎么用就继续往下看

<style type="text/css" scoped >
  .letfCpn-Organization-module {
    padding-right: 10px;
    width: 100%;
    margin-bottom: 25px;
  }

  .adaptation {
    width: 20%;
    /* display: flex;
    flex-wrap: wrap; */
  }

  .allAdaptation {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
</style>
<style>
  .letfCpn-Organization-module
  .el-select {
    width: 100%;
  }

  .letfCpn-Organization-module
  .el-input__inner {
    width: 100% !important;
    border: 1px solid #D7D9E1;
  }

  .letfCpn-Organization-module
  .theme-coustom .el-dialog__body .el-radio-group {
    line-height: 0;
  }

  /* 解决验证边框不变红问题 */
  .letfCpn-Organization-module
  .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error
  .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid,
  .el-message-box__input input.invalid:focus {
    border-color: red !important;
  }

  .letfCpn-Organization-module
  .el-select .el-input--suffix .el-input__inner {
    border-radius: 25px !important;
    border: 1px solid #D7D9E1;
    font-size: 14px;
    color: #222;
  }

  .letfCpn-Organization-module
  .el-select .el-input .el-input__inner {
    border: 1px solid #D7D9E1;
    font-size: 14px;
    color: #222;
  }

  .letfCpn-Organization-module
  .el-form-item__error {
    color: #fff;
    background: red;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    z-index: 10;
    font-size: 12px;
    font-weight: bold;
  }

  .letfCpn-Organization-module
  .el-form-item__error:after, #demo:before {
     border: solid transparent;
     content: ' ';
     height: 0;
     left: 6%;
     position: absolute;
     width: 0;
  }

  .letfCpn-Organization-module
  .el-form-item__error:after {
     border-width: 9px;
     border-left-color: #f00;
     top: -15px;
     transform: rotate(270deg);
  }

  .letfCpn-Organization-module
  .el-form-item__error:before {
     border-width: 14px;
     border-left-color: #333;
     top: 10px;
  }

  .letfCpn-Organization-module
  .el-form-item {
    margin-bottom: 10px;
  }

  /* 日期选择器输入框长度问题 */
  .letfCpn-Organization-module
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }

  .letfCpn-Organization-module
  .el-input-group__append, .el-input-group__prepend {
    padding: 0 10px;
  }

  .letfCpn-Organization-module
  .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA !important;
  }



  /* 在外部插槽使用的class */
  .letfCpn-Organization-module .two {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .letfCpn-Organization-module .two .left {
    width: 50%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
  }

  .letfCpn-Organization-module .two .right {
    width: 50%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
  }

  .letfCpn-Organization-module .one {
    width: 100%;
    padding: 0 10px 0 12px;
  }

  .letfCpn-Organization-module .three {
    width: 100%;
    padding: 0 10px 0 12px;
    display: flex;
    justify-content: space-between;
  }

  .letfCpn-Organization-module .three .left {
    width: 33.3%;
    display: flex;
    flex-direction: column;
  }

  .letfCpn-Organization-module .three .middle {
    width: 33.3%;
    display: flex;
    flex-direction: column;
  }

  .letfCpn-Organization-module .three .right {
    width: 33.3%;
    display: flex;
    flex-direction: column;
  }

  .letfCpn-Organization-module .allAdaptation {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .letfCpn-Organization-module .son .son-input-text {
    position: relative;
  }

  .letfCpn-Organization-module .son .son-input-text .text {
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 12px;
    color: #607088;
    background: #f5f6fa;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .letfCpn-Organization-module
  .son .son-input-text .el-input__inner {
    padding-right: 50px;
  }

  .letfCpn-Organization-module .allAdaptation .son {
    width: var(--defaultNumWide);
    padding: 0 10px;
    /* margin-bottom: 10px; */
  }

  .letfCpn-Organization-module .allAdaptation .son-2 {
    width: calc(var(--defaultNumWide) * 2)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-3 {
    width: calc(var(--defaultNumWide) * 3)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-4 {
    width: calc(var(--defaultNumWide) * 4)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-5 {
    width: calc(var(--defaultNumWide) * 5)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-6 {
    width: calc(var(--defaultNumWide) * 6)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-7 {
    width: calc(var(--defaultNumWide) * 7)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-8 {
    width: calc(var(--defaultNumWide) * 8)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-9 {
    width: calc(var(--defaultNumWide) * 9)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-10 {
    width: calc(var(--defaultNumWide) * 10)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-11 {
    width: calc(var(--defaultNumWide) * 11)  !important;
  }

  .letfCpn-Organization-module .allAdaptation .son-12 {
    width: calc(var(--defaultNumWide) * 12)  !important;
  }

  /* 标签太多横向滚动样式 */
  .letfCpn-Organization-module .allAdaptation .son .exceedTag {
    width: 100%;
    height: 40px;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    list-style-type: none;
    display: flex;
    margin-top: 7px;
  }

  .letfCpn-Organization-module .allAdaptation .son .exceedTag .tag {
    height: 25px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .letfCpn-Organization-module .allAdaptation .cpn-form-two-flex {
    display: flex;
  }

  .letfCpn-Organization-module .allAdaptation .cpn-form-two-flex .left {
    width: 50%;
    padding-right: 3.5px;
  }

  .letfCpn-Organization-module .allAdaptation .cpn-form-two-flex .right {
    width: 50%;
    padding-left: 3.5px;
  }

  /* 根据ui样式调整表单 */
 .letfCpn-Organization-module .el-form-item__label {
    /* height: 100%; */
    /* width: var(--titleWide) !important; */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    line-height: 13px !important;
  }

  .letfCpn-Organization-module .el-form-item__content {
    flex: 1;
    /* overflow: hidden; */
    /* width: 200px; */

    /* height: 100%;
    display: flex;
    align-items: center; */
    line-height: 40px;
  }


  /* 针对 选择框 + 输入框形式样式调整 */
  .letfCpn-Organization-module .select-add-input
  .el-select {
    width: 120px;
    padding-left: 10px;
  }

  .letfCpn-Organization-module .select-add-input
  .el-input__inner {
    border-left: 0px;
  }

  .letfCpn-Organization-module .select-add-input
  .el-input-group__append, .el-input-group__prepend {
    border: 0px;
  }

  .letfCpn-Organization-module .select-add-input
  .el-select .el-input .el-input__inner {
    border: 1px solid #D7D9E1 !important;
  }

  /* 针对禁用模式文字颜色调整  #828395 */
  .letfCpn-Organization-module
  .el-input.is-disabled .el-input__inner {
    color: #828395;
  }

  .letfCpn-Organization-module
  .el-textarea.is-disabled .el-textarea__inner {
    color: #828395;
  }

  .letfCpn-Organization-module
  .el-range-editor.is-disabled {
    color: #828395 !important;
  }

  .letfCpn-Organization-module
  .el-range-editor.is-disabled input {
    /* background: #fff; */
  }

  .letfCpn-Organization-module .el-range-editor.el-input__inner {
    border-radius: 20px;
    /* border: 1px solid #B3B8C1; */
    padding-right: 5px;
    background: var(--inputAddButton) !important;
  }

  .letfCpn-Organization-module .form-input-btn
  .el-input.is-disabled .el-input__inner{
    background: var(--inputAddButton) !important;
  }

  .letfCpn-Organization-module .form-input-btn
  .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover {
    background-color: transparent;
    border: 0;
  }
</style>
<template>
  <div class="letfCpn-Organization-module" >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="titleWide" :disabled="disabled" class="demo-ruleForm">
      <!-- <slot></slot> -->
      <div class="allAdaptation" :style="{'--defaultNumWide': defaultNumWide, '--inputAddButton': inputAddButton}" >
        <slot></slot>
      </div>

    </el-form>
  </div>

</template>


<script type="text/javascript"  >
export default {
  //复用组件
  components: {
  },
  //接收父组件数据
  props: {
    defaultWide: {type: Number, default: 1},
    ruleForm: {type: Object, default: {}},
    rules: {type: Object, default: {}},
    titleWide: {type: String, default: '100px'},
    disabled: {type: Boolean, default: false}
  },
  data() {
    return {
      defaultNumWide: '100%',
      inputAddButton: ''
    }
  },
  beforeDestroy() {},
  computed: {},
  watch: {
    disabled: {
      handler(newV, oldV) {
        this.inputAddButton = !newV ? '#fff' : '#F5F7FA'
      },
      deep: true,
      immediate: true
    }
  },
  activied() {},
  mounted() {
    this.defaultNumWide = 100 / this.defaultWide + '%'
    // console.log(this.defaultNumWide)
  },
  beforeDestroy () {
  },
  methods: {
    resetFields(){
      this.$refs.ruleForm.resetFields();
    },
    // 表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('formResult', true)
        } else {
          this.$emit('formResult', false)
          return false;
        }
      });
    },
    // 重置功能
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

</script>

首先将上面的代码放在一个.vue的文件里面

<style lang='scss' scoped>
</style>
<template> 
    <organization-form 
        :default-wide="2" 
        :rule-form="yourFormObject" 
        :rules="yourRulesObject" 
        :title-wide="'150px'"
        @formResult="onFormResult"
        :disabled="false">
    </organization-form> 
</template>
<script>
//OrganizationForm这个是我自己创建的文件名称
import OrganizationForm from './path-to-your-component/OrganizationForm.vue';
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
  //提交
      submitTheForm() { 
      this.$refs.organizationForm.submitForm('ruleForm');
      },
      //重置表单
      resetTheForm() { 
      this.$refs.organizationForm.resetForm('ruleForm');
      },
      //表单验证后要请求的提交接口
      onFormResult(valid) { 
      if (valid) { 
      // 处理表单提交成功 
      } else { 
      // 处理表单验证失败 
      }
  },
  created() {},
  mounted() {},
  beforeDestroy() {}
};
</script>