Element UI中,怎么使用v-model获取用户选择的标签信息
时间: 2024-09-25 18:15:22 浏览: 45
在Element UI中,你可以使用`el-tag`组件配合`v-model`属性来获取用户选择的标签信息。`el-tag`是一个自定义的HTML元素,通常用于创建可点击的标签。下面是一个简单的例子:
```html
<template>
<div>
<el-input v-model="tagsInput" placeholder="请输入标签"></el-input>
<el-tag-group v-model="selectedTags">
<el-tag :key="tag.id" closable @close="removeTag(tag)">
{{ tag.name }}
</el-tag>
<!-- 这里的v-for遍历selectedTags数组 -->
<el-tag v-for="tag in selectedTags" :key="tag.id" closable @close="removeTag($index)">
{{ tag.name }}
</el-tag>
</el-tag-group>
</div>
</template>
<script>
export default {
data() {
return {
tagsInput: '',
selectedTags: [] // 存储已选标签
};
},
methods: {
removeTag(index) {
this.selectedTags.splice(index, 1); // 当标签被关闭时,从selectedTags中移除
}
}
};
</script>
```
在这个例子中,`v-model`绑定到`tagsInput`,允许用户输入新标签。`el-tag-group`的`v-model`绑定了`selectedTags`,当用户点击标签或者使用`@close`事件移除标签时,这个数组会自动更新。
阅读全文