使用element-ui 生成一个动态添加和删除元素的代码,要求删除元素的按钮在元素右侧
时间: 2024-03-20 16:41:09 浏览: 17
好的,以下是一个使用element-ui实现动态添加和删除元素的示例代码:
```vue
<template>
<div>
<el-button type="primary" @click="addInput">添加元素</el-button>
<div v-for="(item, index) in items" :key="index">
<el-input v-model="item.value" style="width: 200px;"></el-input>
<el-button type="danger" @click="deleteInput(index)" icon="el-icon-close"></el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [{ value: '' }]
}
},
methods: {
addInput() {
this.items.push({ value: '' })
},
deleteInput(index) {
this.items.splice(index, 1)
}
}
}
</script>
```
在上面的代码中,我们使用了`el-button`和`el-input`来实现添加和删除元素的功能。通过`v-for`指令,我们可以创建一个可重复的元素列表,并且每个元素都会包含一个输入框和一个删除按钮。当用户点击添加元素按钮时,我们会向`items`数组中添加一个新的元素对象,这个对象包含一个空字符串作为输入框的默认值。当用户点击删除按钮时,我们会从`items`数组中删除对应的元素对象。
此外,我们使用了`el-icon-close`图标作为删除按钮的图标,并且将其放置在输入框的右侧。这是因为我们在`el-button`组件中使用了`icon`属性来设置图标,并且`el-button`组件默认会将图标放置在按钮的左侧。如果需要将图标放置在右侧,我们可以将`el-button`组件的`icon-position`属性设置为`right`即可。