显示el-tag 标签,限制宽度 超出显示剩余个数 vue
时间: 2023-08-08 22:02:50 浏览: 505
在Vue中,我们可以使用`el-tag`标签来实现标签的显示和限制宽度超出后显示剩余个数的功能。
首先,在Vue组件中引入`el-tag`组件:
```javascript
<template>
<div>
<el-tag :class="tagClass" v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['标签1', '标签2', '标签3', '标签4', '标签5'],
tagClass: 'tag'
};
}
};
</script>
<style>
.tag {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
```
在上述代码中,我们使用`el-tag`标签来显示标签内容,并且使用`v-for`指令通过循环渲染出多个标签。通过`:class`绑定属性,我们可以为每个标签设置特定的样式类。
在`style`标签中,我们为`.tag`样式类设置了`max-width`属性来限制标签的宽度,当标签内容超出这个宽度时,将自动隐藏多余部分。使用`white-space: nowrap`来防止标签换行,`overflow: hidden`来隐藏超出部分并且使用`text-overflow: ellipsis`来显示省略号。
通过这种方式,我们可以在Vue中使用`el-tag`标签来显示限制宽度超出后显示剩余个数的标签。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)