使用Vue实现标签多选功能（二）

前言

之前写过一篇简单的标签多选功能实现，说简单是因为那些标签只是存在一个内部数据类型单一的数组中。而今天要说的是比较复杂的情况，就是标签数据存储在某个数组的对象的某个数组中，有点绕，不过相信开发过类似功能的人能马上就看懂，最后的效果图如下

开发过程

其实，只要思路对了，实现这个标签多选功能非常简单，下面先看HTML结构代码

<div class="label-wrap">
  <div class="label-title">
    <h1 class="title">选择问题标签匹配擅长的医生</h1>
    <p class="sub-title">
      <span>最多选择3个 已选</span>
      <span class="number">{{tagIds.length}}</span> 个
    </p>
  </div>
  <div class="label-box" v-for="(item,index) of tagList" :key="index">
    <h1 class="title">{{item.tagCategoryName}}</h1>
    <div class="label-item">
      <span 
        v-for="(tabItem,index) of item.tagVoList" 
        :key="index" 
        @click="selectTag(tabItem.tagId,tabItem.tagName)"
        :class="{seActive: isTags(tabItem.tagId)}">
          {{tabItem.tagName}}
        </span>
    </div>
  </div>
</div>

业务代码的核心只有一个：在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;
  }
}

由于以上代码过于简单和基础，就不再啰嗦什么啦，本系列就此结束！有疑问的可以私信我或者留言。