Vue3 elment plus 实现动态遍历生成el-input

在Vue3中，结合Element Plus库，实现动态遍历生成`el-input`，通常会涉及到组件化、模板和数据驱动。假设你有一个数组`dataList`，你想根据这个数组的内容动态创建输入框，你可以这样做：

<template>
  <div v-for="(item, index) in dataList" :key="index">
    <el-input v-model="item.value" placeholder="请输入值"></el-input>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElInput } from 'element-plus';

// 定义一个响应式的数据列表
const dataList = ref([
  { value: '' }, // 示例数据
  { value: '' },
  { value: '' },
  // ... 更多项
]);

// 使用v-model绑定值，双向数据绑定
ElInput.extendOptions.props.value = {
  type: String,
  required: true
};
</script>

在这个例子中：
1. `v-for`指令用于循环遍历`dataList`数组，为每个元素渲染一个`el-input`组件。
2. `ref`函数从`vue`模块引入，用于创建响应式的变量，`dataList`会在数据变化时自动更新视图。
3. `v-model`指令用于双向数据绑定，当用户在输入框中输入内容时，`item.value`会被实时更新。