el-tag 新增到指定位置
时间: 2024-09-28 12:00:28 浏览: 17
在Element UI库中的`el-tag`组件是一个用于创建标签、标签页或者其他类似功能的小部件。如果你想将一个新的`el-tag`添加到已有的元素列表或容器中,你可以按照以下步骤操作:
1. 首先,你需要在HTML模板中有一个可以容纳`el-tag`的父元素,比如一个`ul`或`div`。
```html
<template>
<div>
<ul ref="tagsList"> <!-- 这里就是你的标签列表 -->
<li v-for="tag in tags">{{ tag }}</li> <!-- 当前已有标签 -->
</ul>
</div>
</template>
```
2. 然后,在你的Vue实例的script部分,引入`el-tag`并设置数据来存储新标签。
```javascript
<script>
export default {
data() {
return {
newTag: '', // 初始化新标签文本
tags: ['tag1', 'tag2'], // 当前已有标签数组
};
},
methods: {
addNewTag() { // 添加新的标签方法
if (this.newTag) {
this.$refs.tagsList.appendChild( // 使用ref将新标签添加到列表末尾
Vue.extend({
template: '<el-tag :closable="true" @close="removeTag($index)">{{ newTag }}</el-tag>',
}).$mount()
);
this.newTag = ''; // 清空输入框
}
},
removeTag(index) { // 移除标签的方法
this.tags.splice(index, 1);
},
},
};
</script>
```
在这个例子中,`addNewTag`方法会创建一个新的`el-tag`实例,并将其动态地插入到`tagsList`的最后。如果需要在特定索引处添加,你可以调整`appendChild`后的DOM操作。