vue elementui 动态追加下拉框、输入框

在Vue中使用Element UI时，可以通过循环渲染动态的表单项，包括下拉框（Select）和输入框（Input）。以下是一个简单的例子，展示了如何动态追加这些表单项：

<template>
  <div>
    <el-form :model="form" ref="form" label-width="80px">
      <el-row v-for="(item, index) in form.items" :key="index">
        <el-col :span="6">
          <el-form-item label="下拉框">
            <el-select v-model="item.selectValue" placeholder="请选择">
              <el-option
                v-for="option in selectOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="输入框">
            <el-input v-model="item.inputValue"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button @click="removeItem(index)">移除</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-button @click="addItem">添加项目</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: []
      },
      selectOptions: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' }
      ]
    };
  },
  methods: {
    addItem() {
      this.form.items.push({
        selectValue: '',
        inputValue: ''
      });
    },
    removeItem(index) {
      this.form.items.splice(index, 1);
    }
  }
};
</script>

在这个例子中，我们定义了一个form对象，它包含一个items数组。items数组中的每个元素都是一个对象，它包含selectValue和inputValue两个属性，分别对应下拉框和输入框的值。

addItem方法用于向items数组中添加新的空白表单项，removeItem方法用于从items数组中移除指定索引的表单项。在模板中，我们使用v-for来循环渲染items数组中的每个元素，并为每个元素创建一个下拉框和输入框，以及一个用于移除该项的按钮。