之前写过一篇简单的标签多选功能实现，说简单是因为那些标签只是存在一个内部数据类型单一的数组中。而今天要说的是比较复杂的情况，就是标签数据存储在某个数组的对象的某个数组中，有点绕，不过相信开发过类似功能的人能马上就看懂，最后的效果图如下
其实，只要思路对了，实现这个标签多选功能非常简单，下面先看HTML结构代码
选择问题标签匹配擅长的医生
>最多选择3个 已选
class="number">{{tagIds.length}} 个
{{item.tagCategoryName}}
v-for="(tabItem,index) of item.tagVoList"
:key="index"
@click="selectTag(tabItem.tagId,tabItem.tagName)"
:class="{seActive: isTags(tabItem.tagId)}">
{{tabItem.tagName}}
业务代码的核心只有一个：在Javascript中，函数是一等公民。 下面看源码
// 获取分类好的标签列表
getTagCategoryList() {
let datas = {
userId: sessionStorage.getItem("userId")
};
Answer.getTagCategoryList(datas).then(res => {
this.tagList = res.data;
});
},
// 标签选择
selectTag(tagId, tagName) {
for (let i = 0; i < this.tagIds.length; i++) {
if (this.tagIds[i] == tagId) {
this.tagIds.splice(i, 1);
this.tagNames.splice(i, 1);
return false;
}
}
if (this.tagIds.length < 3) {
this.tagIds.push(tagId);
this.tagNames.push(tagName);
} else {
this.$toast({
message: "最多只能选择3个标签！",
position: "middle",
duration: 1000
});
return false;
}
},
// 标签选择样式控制
isTags(tagId) {
if (this.tagIds.includes(tagId)) {
return true;
} else {
return false;
}
}
由于以上代码过于简单和基础，就不再啰嗦什么啦，本系列就此结束！有疑问的可以私信我或者留言。
