今天第一次在项目中用到 Tag 标签,使用前先根据官方文档写了一个小 demo,实现可移除的标签效果:
官方代码示例是这样的:
<template>
<div>
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
</div>
</template>
<script>
export default {
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三']
}
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
}
}
}
</script>
<style scoped lang="scss">
.el-tag + .el-tag {
margin-left: 10px;
}
</style>
在网页上试一下是没问题的:
然而,我不经意间瞄到了 handleClose
中写的方法,觉得有点不对,用 indexOf
来确定位置的话,如果 tag 的名字重复,是不是就有问题了呢,于是我给 dynamicTags 加了一个 “标签一”:
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三', '标签一']
}
}
再到网页试试效果:
是不是出现了两个问题…第一个问题是我删除最后一个“标签一”,却把第一个“标签一”给删掉了;第二个问题是删除的动画好像有点问题;还有一个问题是页面会报错,因为有两个“标签一”,所以 key 值重复了。那么我们来一个一个解决:
首先是第一个删除的问题,这个一看就是逻辑的问题,官方文档示例中的方法如果遇到标签名一样的情况,肯定会出错,这里对 Tag 的 close 事件做一个修改;然后 key 值报错的问题,把 key 值修改一下让它成为唯一值就好了:
<template>
<div>
<el-tag
:key="tag + index"
v-for="(tag, index) in dynamicTags"
closable
:disable-transitions="false"
@close="tag => handleClose(tag, index)"
>
{{ tag }}
</el-tag>
</div>
</template>
<script>
export default {
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三', '标签一']
}
},
methods: {
handleClose(tag, index) {
this.dynamicTags.splice(index, 1)
}
}
}
</script>
改成了用下标 index 来确定位置的方式,现在效果如下:
可以看到删除最后一个“标签一”,第一个“标签一”不会受影响了。但是如果没有从最后一个标签开始删的话,动画的问题又会出现了:
这个频闪的问题查了半天也不知道是什么问题,本人暂时无法解决,直接一劳永逸把动画效果关了:
:disable-transitions="true"