本文主要是介绍Vue+Ant Design 实现 tags标签选中高亮，跳转路由，且删除标签的功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
注意点：
1.要完成高亮效果需使用<a-checkable-tag>标签而不是<a-tag>标签
2.所有tags都是遍历来的所以选中一个就会所有的都选中，为了解决这个问题，在tagsList中添加isChecked属性，初始值为false。但是tagsList中从Vuex中取出的，无法进行渲染所以用this.$set进行设置
3.排他，只有点击的高亮，将其他的排除
<template><div><a-checkable-tag :checked="t.isChecked" v-for="t in tagsList" :key="t.path" :closable="t.label !== '首页'"@close="closeHandle(t)" @change="handleChange(t)">{{ t.label }}</a-checkable-tag></div>
</template><script>
import {mapState} from 'vuex'export default {name: '',data() {return {};},created() {},mounted() {this.addChecked()},components: {},computed: {...mapState('t', ['tagsList']),},methods: {closeHandle(val) {console.log(val)const index = this.tagsList.findIndex((item) =>item.path === val.path)this.tagsList.splice(index, 1)},handleChange(val) {this.$set(val, 'isChecked', !val.isChecked); // 使用this.$set更新属性// 只选中一个，排除其他this.tagsList.forEach(item => {if (item.path !== val.path) {item.isChecked = false}})if (this.$route.path !== val.path) {this.$router.push(val.path)}},addChecked() {this.tagsList.map((item) => {// item.isChecked = falsethis.$set(item, 'isChecked', false);})}}
}
</script><style scoped lang="less">
.ant-tag {font-size: 16px;padding: 4px;
}
</style>
这篇关于Vue+Ant Design 实现 tags标签选中高亮，跳转路由，且删除标签的功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
