Cara Vue ElementUI mengendalikan borang bersaiz besar

Artikel ini akan menunjukkan kepada anda cara Vue ElementUI mengendalikan bentuk yang sangat besar, saya harap ia akan membantu anda!

Disebabkan pelarasan perniagaan baru-baru ini dalam syarikat, logik bentuk super panjang sebelumnya telah banyak berubah, jadi saya bercadang untuk membina semula (ia ditulis oleh latar belakang pengurus yang telah meletak jawatan , dan tiada komen Satu komponen mempunyai 4,000 baris yang ditulis, yang benar-benar tidak berkuasa). Untuk kemudahan anda, saya telah membahagikan projek kepada 14个组件 dan memperkemaskannya.

Idea keseluruhan

• Borang besar dibahagikan mengikut modul perniagaan
• Apabila menyimpan, gunakan kaedah el-form yang disediakan oleh validate untuk pengesahan ( Gelung untuk mengesahkan setiap komponen pecahan)
• pengekstrakan awam mixin bagi setiap komponen (juga kondusif untuk penyelenggaraan projek kemudian)

[Cadangan berkaitan: " Tutorial vue.js"]

Mula

• Berikut ialah contoh 拆分2个组件: form1, form2 (untuk kemudahan pembaca, menamakan Don 't spray)
• Mengapa dua komponen di sini ref、model terikat form akan diterangkan kemudian (untuk kemudahan penyelenggaraan kemudian)

// form1 组件
<template>
    <el-form
      ref="form"
      :model="form"
      label-width="10px"
    >
      <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
</template>
<script>
export default {
  name: &#39;Form1&#39;,
    props: {
      form: {}
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: &#39;请输入姓名&#39;, trigger: &#39;blur&#39; }
        ]
      }
    }
  },
  methods: {
    // 这里是是为了父组件循环调用校验
    validForm() {
        let result = false
        this.$refs.form.validate(valid => valid && (result = true))
        return result
    }
    // 我这里还用了另一种方式写的，但是循环校验的时候是promise对象，有问题，望大佬们指点一二
    validForm() {
        // 明明这里输出的结构是 Boolean 值，但在父组件循环调用之后就是promise类型，需要转换一下才行
        return this.$refs.form.validate().catch(e => console.log(e))
    }
  }
}
</script>

// form2 组件
<template>
    <el-form
      ref="form"
      :model="form"
      label-width="10px"
    >
      <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
</template>
<script>
export default {
  name: &#39;Form2&#39;,
  props: {
      form: {}
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: &#39;请输入年龄&#39;, trigger: &#39;blur&#39; }
        ]
      }
    }
  },
  methods: {
    // 这里是是为了父组件循环调用校验
    validForm() {
        let result = false
        this.$refs.form.validate(valid => valid && (result = true))
        return result
    }
  }
}
</script>

• Lihat bagaimana komponen induk merujuk kepada

// 父组件
<template>
    <div class="parent">
        <form1 ref="form1" :form="formData.form1" />
        <form2 ref="form2" :form="formData.form2" />
        <el-button type="primary" @click="save">报错</el-button>
    </div>
</template>
<script>
... 省略引用
export default {
    name: &#39;parent&#39;,
    ... 省略注册
    data () {
        return {
            formData: {
                form1: {},
                form2: {}
            }
        }
    },
}
</script>

• Memandangkan nama atribut formData dan form1 dalam form2 digunakan pada ref bagi. komponen bentuk anak masing-masing, jadi Anda boleh mencarinya secara bergilir semasa traversal dan mengubah suai fungsi simpan Kod adalah seperti berikut:

methods: {
    save () {
        // 每个表单对象的 key 值，也就是每个表单的 ref 值
        const formKeys = Object.keys(this.formData)
        // 执行每个表单的校验方法
        const valids = formKeys.map(item => this.$refs[item].validForm())
        // 所有表单通过检验之后的逻辑
        if (valids.every(item => item)) {
          console.log(11)
        }
    }
}

Jawab mengapa kedua-dua komponen ref、model terikat kepada kedua-duanya. form

• Sebagai perbandingan, kami dapati bahawa form1 form2 mempunyai props methods
• yang biasa. Kami mengekstraknya melalui mixin

dan sebutkan dalam

export default {
  props: {
    form: {
      required: true,
      type: Object,
      default: () => {}
    },
  },
  methods: {
    validForm () {
      let result = false
      this.$refs.form.validate(valid => valid && (result = true))
      return result
    }
  }
}

🎜>, dan padamkan atribut dan kaedah yang sepadan dalam komponen yang sepadan

• form1 form2Tamatminix

Ia sangat menyusahkan untuk menyelesaikan bentuk yang sangat besar, di sini hanya pecahan komponen

Kaitan antara komponen juga merupakan kesukaran besar saya akan menyiarkannya selepas selesai pada masa akan datang

• Anda dialu-alukan untuk membincangkan cara anda menyelesaikannya di ruang komen, dan anda juga dialu-alukan untuk menunjukkan kekurangan kepada pengarang
• Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari:
• Pengenalan kepada Pengaturcaraan
! !

Atas ialah kandungan terperinci Cara Vue ElementUI mengendalikan borang bersaiz besar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!