el-input结合el-tag
时间: 2023-10-07 15:14:29 浏览: 78
el-input是一个输入框组件,而el-tag是一个标签组件。这两个组件可以结合使用,例如在输入框中输入标签,然后将其显示为el-tag。以下是一个简单的示例:
```
<template>
<div>
<el-input v-model="inputValue" @keyup.enter="addTag"></el-input>
<div>
<el-tag v-for="(tag, index) in tags" :key="index" closable @close="removeTag(index)">
{{tag}}
</el-tag>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
tags: []
}
},
methods: {
addTag() {
if (this.inputValue && !this.tags.includes(this.inputValue)) {
this.tags.push(this.inputValue);
this.inputValue = '';
}
},
removeTag(index) {
this.tags.splice(index, 1);
}
}
}
</script>
```
在上面的示例中,我们使用了一个输入框和一个标签列表,用户可以在输入框中输入标签,按下Enter键后将其添加到标签列表中。每个标签都是一个el-tag组件,可以点击右侧的关闭按钮来删除它。