如何根据后端返回的数据显示多个el-tag
时间: 2024-04-11 16:27:25 浏览: 126
eladmin-web
您可以使用循环来遍历后端返回的数据,并在每个数据项上创建一个 `el-tag` 组件来显示多个标签。
以下是一个示例代码:
```html
<template>
<div>
<el-tag v-for="tag in tags" :key="tag.id" :type="tag.type">{{ tag.name }}</el-tag>
</div>
</template>
<script>
export default {
data() {
return {
tags: [], // 后端返回的标签数据
};
},
mounted() {
// 假设从后端获取到的标签数据为 tagsArray
// 可以根据实际情况将后端返回的数据赋值给 tags
this.tags = tagsArray;
},
};
</script>
```
在上面的代码中,我们使用 `v-for` 指令来遍历 `tags` 数组,并为每个标签创建一个 `el-tag` 组件。`:key` 属性用于给每个标签指定一个唯一的标识符,`:type` 属性用于设置标签的类型,`tag.name` 用于显示标签的名称。
您可以根据实际情况修改代码,并根据后端返回的数据进行适当的处理。
阅读全文