![在这里插入图片描述](https://img-blog.csdnimg.cn/99e921e2b8134bd08985afee1f44473d.png)
- HTML 关键代码
<div class="mb-6">
<div class="flex gap-6 align-items-center mb-6">
<span>接口头部信息</span>
<el-button :icon="Plus" circle class="ml-3" @click="addHeaderRow" />
</div>
<div class="flex gap-6 mb-3 header-wrap" v-for="(item, index) in state.editForm.header" :key="index">
<el-form-item prop="key">
<el-input v-model="item.key" placeholder="key"></el-input>
</el-form-item>
<el-form-item prop="value">
<el-input v-model="item.value" placeholder="value"></el-input>
</el-form-item>
<el-button :icon="Close" circle @click="deleteHeaderRow(index)" />
</div>
</div>
- TS 关键代码
const state = reactive({
editForm: {
...
header: [],
},
})
const addHeaderRow = () => {
state.editForm.header.push({ key: '', value: '' });
};
const deleteHeaderRow = (index: number) => {
state.editForm.header.splice(index, 1);
};