vue3动态表单
2021/10/29 6:12:03
本文主要是介绍vue3动态表单,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<template> <el-form ref="ruleformRef" :model="ruleform"> <el-form-item v-for="(li, i) in ruleform.array" :key="i" :label="`姓名${i}`" :prop="`array.${i}.item`" :rules="rules.required" > <el-input v-model="li.item"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script lang="ts"> import { Options, Vue } from "vue-class-component"; /** * vue3动态表单注意点: * 1、ref和:model名称不能一样 * 2、:prop写法固定【数组.索引.数组元素属性】 * 3、数组与v-for名称一致,数组元素属性与v-model名称一致 */ @Options({ components: {}, }) export default class Home extends Vue { private ruleform = { array: [{ item: "" }, { item: "" }, { item: "" }], }; private rules = { required: [{ required: true, message: "必填项", trigger: "blur" }], }; private submitForm() { (this.$refs.ruleformRef as HTMLFormElement).validate((valid: boolean) => { if (valid) { alert("submit!"); } else { return false; } }); } private resetForm() { (this.$refs.ruleformRef as HTMLFormElement).resetFields(); } } </script>
这篇关于vue3动态表单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set