当el-form把数组中的数据渲染过来后，怎么在el-form表单中数据每一项后面都让添加编辑删除的按钮

在Element UI的el-form中，当你需要为数组中的每个数据项展示添加、编辑和删除操作时，可以采用动态生成表单元素并配合事件监听的方式。首先，你需要获取到数组数据，并在模板上创建一个包含操作按钮的结构，例如：
<template>
<el-form ref="form" :model="formData">
<el-row v-for="(item, index) in formData.list" :key="index">
<el-col :span="8">
<el-form-item label="字段名">{{ item.fieldName }}</el-form-item>
</el-col>
<el-col :span="4">
<!-- 添加按钮 -->
<el-button @click="addItem(index)">添加</el-button>
<!-- 编辑按钮 -->
<el-button @click="editItem(index)">编辑</el-button>
<!-- 删除按钮 -->
<el-button type="danger" @click="deleteItem(index)">删除</el-button>
</el-col>
</el-row>
<!-- 表单提交部分省略 -->
</el-form>
</template>
登录后复制
然后，在Vue实例的methods中编写对应的方法：
export default {
data() {
return {
formData: {
list: [], // 初始的数据数组
},
};
},
methods: {
addItem(index) {
// 这里可以新增一行数据并更新列表
this.formData.list.splice(index + 1, 0, { fieldName: '' });
},
editItem(index) {
// 根据索引获取当前行数据，并打开编辑模式或其他处理逻辑
const currentItem = this.formData.list[index];
// 省略具体的编辑逻辑
},
deleteItem(index) {
// 删除指定索引的数据
this.formData.list.splice(index, 1);
},
},
};
登录后复制
每次点击添加、编辑或删除按钮时，相应的事件会被触发，你可以根据事件去修改数据状态。注意维护好数据的双向绑定，确保表单的状态与实际数据同步。