vue3中form表单中加行按钮

在Vue3中，可以使用v-for指令和响应式数组来实现表单中动态添加行的功能。以下是一个简单的示例：

1. 在data中定义表单数据和行数组：

data() {
  return {
    form: {
      name: '',
      age: ''
    },
    rows: []
  }
}

2. 在模板中使用v-for指令渲染行，使用v-model绑定数据：

<form>
  <div v-for="(row, index) in rows" :key="index">
    <input v-model="row.name" type="text">
    <input v-model="row.age" type="text">
    <button @click="removeRow(index)">删除</button>
  </div>
</form>

3. 在methods中添加添加行和删除行的方法：

methods: {
  addRow() {
    this.rows.push({ name: '', age: '' })
  },
  removeRow(index) {
    this.rows.splice(index, 1)
  }
}

4. 在模板中添加添加行的按钮：

<button @click="addRow">添加行</button>

这样，点击添加行按钮就可以动态添加新的行了。

相关问题

vue3清空form表单

以下是两种Vue3清空表单的方法：

1.使用resetFields()方法

<template>
  <form ref="myForm">
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <button @click="resetForm">重置</button>
  </form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('')
    const age = ref('')
    const myForm = ref(null)

    const resetForm = () => {
      myForm.value.resetFields()
    }

    return {
      name,
      age,
      myForm,
      resetForm
    }
  }
}
</script>

2.使用reset()方法

<template>
  <form ref="myForm">
    <input type="text" v-model="name">
    <input type="text" v-model="age">
    <button @click="resetForm">重置</button>
  </form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const name = ref('')
    const age = ref('')
    const myForm = ref(null)

    const resetForm = () => {
      myForm.value.reset()
    }

    return {
      name,
      age,
      myForm,
      resetForm
    }
  }
}
</script>

vue3封装form表单组件

在Vue3中封装form表单组件的思路可以参考以下步骤：

1. 创建一个Form组件，作为整个表单的容器。该组件可以包含一个form元素，并接受一个表单数据对象作为props。
2. 在Form组件内部，使用v-for指令遍历表单数据对象的属性，并根据属性的类型渲染对应的表单项。
3. 对于每个表单项，可以创建一个FormItem组件，并根据属性的类型渲染对应的表单元素，比如input、select、textarea等。
4. FormItem组件可以接受属性的名称、类型和值作为props，并根据类型渲染不同的表单元素。
5. 可以根据需要扩展Form组件和FormItem组件，添加更多的表单项类型，比如富文本编辑器、上传图片等。
6. 在Form组件中，可以监听表单元素的值变化，并将变化的值更新到表单数据对象中。
7. 可以在Form组件中添加提交按钮，并在点击按钮时触发表单提交事件，将表单数据对象作为参数传递给父组件。

需要注意的是，这只是一个基本的封装思路，如果需要使用到更多的业务场景，可以根据具体需求进行扩展和定制。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [vue3 ts element plus form表单二次封装详细步骤 （附参数、类型详细介绍及简单使用示例）](https://blog.csdn.net/weixin_45291937/article/details/126275955)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]