element-plus动态添加表单项
时间: 2023-08-06 12:03:38 浏览: 381
要动态添加表单项,你可以使用 Element Plus 提供的动态表单组件。以下是一个示例代码,演示了如何使用 Element Plus 的动态表单组件来实现动态添加表单项:
```html
<template>
<div>
<el-form :model="form" ref="dynamicForm">
<el-form-item v-for="(item, index) in form.items" :key="index">
<el-input v-model="item.value" placeholder="Enter a value"></el-input>
<el-button @click="removeFormItem(index)" icon="el-icon-delete"></el-button>
</el-form-item>
</el-form>
<el-button @click="addFormItem" icon="el-icon-plus"></el-button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
items: [] // 表单项数组
}
};
},
methods: {
addFormItem() {
this.form.items.push({ value: "" }); // 添加一个空的表单项
},
removeFormItem(index) {
this.form.items.splice(index, 1); // 移除指定索引的表单项
}
}
};
</script>
```
在上面的示例中,我们通过 `v-for` 指令来遍历 `form.items` 数组,动态渲染表单项。通过点击 "添加" 按钮,可以调用 `addFormItem` 方法来向 `form.items` 数组中添加一个新的表单项。点击每个表单项旁边的 "删除" 按钮,可以调用 `removeFormItem` 方法来移除指定索引的表单项。
这样,你就可以通过 Element Plus 实现动态添加表单项的功能了。记得根据你的实际需求对表单项进行适当的修改和扩展。