vue elementui 动态添加 el-input

在Vue中使用Element UI时，可以通过v-for指令动态创建el-input组件。以下是一个简单的例子：

<template>
  <div>
    <el-input
      v-for="(input, index) in inputs"
      :key="index"
      v-model="input.value"
      @change="handleInputChange(index, $event)"
    ></el-input>
    <el-button @click="addInput">添加输入框</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputs: [
        { value: '' } // 初始输入框
      ]
    };
  },
  methods: {
    addInput() {
      this.inputs.push({ value: '' }); // 添加新的输入框
    },
    handleInputChange(index, value) {
      this.inputs[index].value = value; // 更新输入框的值
    }
  }
};
</script>

在这个例子中，我们定义了一个inputs数组来跟踪所有的输入框。v-for指令用于渲染每个输入框，并绑定了一个v-model来实现数据双向绑定。每当输入框的值发生变化时，@change事件会触发handleInputChange方法，更新对应输入框的值。点击按钮会调用addInput方法，在inputs数组中添加一个新的输入框。