vue 动态添加表单行（vueelementui动态添加表单）

需要技术培训支撑，请私信我！

1、动态表单函数

在Vue中实现动态添加表单行，可以通过数组来存储表单的每一行数据，然后使用v-for循环来动态生成表单行。以下是一个简单的示例：

<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <input v-model="item.name" placeholder="Name">
      <input v-model="item.email" placeholder="Email">
      <button @click="removeLine(index)">删除</button>
    </div>
    <button @click="addLine">添加</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formItems: [
        {
          name: '',
          email: ''
        }
      ]
    }
  },
  methods: {
    addLine () {
      this.formItems.push({
        name: '',
        email: ''
      })
    },
    removeLine (index) {
      this.formItems.splice(index, 1)
    }
  }
}
</script>

在这个示例中，我们的每一个表单项包含"name"和"email"两个字段。我们初始化了一个包含一个空表单项的'formItems'数组。

我们使用 v-for 指令生成表单中的每一行，每一行包含一个名字输入框，一个邮箱输入框，以及一个删除按钮。

我们定义了两个方法：“addLine”和“removeLine”。当点击"添加"按钮时，会向'formItems'数组中添加一个新的、空的表单项，从而在表单中添加一行。当点击某一行的"删除"按钮时，会通过方法 "removeLine" 删除对应的表单项，从而删除表单中的那一行。

整个流程就是通过操作数组，以实现动态添加和删除表单项的操作。

2、@change事件可以选中多个参数

在 Vue 的 select 组件中使用 @change 事件，并将多个参数传递给事件处理器并不直接支持。@change 事件自带的参数只有一个，即当前选择的值。

如果你需要在选择发生改变时得到多个参数，一个常见的做法是在事件处理函数中访问这些数据，而不是试图将它们作为参数传递。你可以在 Vue 实例的 data 或 computed 属性中添加这些数据。

这是一个简单的例子，展示了如何在 handleChange 方法中使用多个数据：

<template>
  <div>
    <el-select v-model="value" @change="handleChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'Option1', label: 'Option 1' },
        { value: 'Option2', label: 'Option 2' },
        { value: 'Option3', label: 'Option 3' }
      ],
      value: ''
    }
  },
  methods: {
    handleChange(value) {
      console.log('selected value: ', value);
      console.log('all options: ', this.options);
      console.log('selected option label: ', this.options.find(option => option.value === value).label);
    }
  }
}
</script>

在这个例子中，handleChange 方法不仅可以获取到被选择的值，也可以访问 this.options（所有选项）以及查找被选择的选项的标签。因此，尽管 @change 事件只提供了一个参数，但你仍然可以在事件处理器中使用其他数据。