vue 实现多选

效果如下:
点击前

点击后：

image.png

          <table>
            <tr>
              <td>行政区域</td>
              <td>
                <div class="clickFalse" v-for="(item,index) in areaList" :key="index" data-type="行政区域" closable @click="clickSearch($event)">{{item.name}}
                  <i class="el-icon-close" hidden="hidden"></i>
                </div>
              </td>
            </tr>
            <tr>
              <td>数据类型</td>
              <td>
                <div class="clickFalse" v-for="(item,index) in areaList" :key="index" data-type="数据类型" closable @click="clickSearch($event)">{{item.name}}
                  <i class="el-icon-close" hidden="hidden"></i>
                </div>
              </td>
            </tr>
            <tr>
              <td>年份</td>
              <td>
                <div class="clickFalse" v-for="(item,index) in areaList" :key="index" data-type="年份" closable @click="clickSearch($event)">{{item.name}}
                  <i class="el-icon-close" hidden="hidden"></i>
                </div>
              </td>
            </tr>
          </table>

点击div对dom元素进行修改

    clickSearch($event) {
      if ($event.currentTarget.className == "clickFalse") {
        $event.currentTarget.className = "clickTrue";
        this.searchArray.push({
          key: $event.currentTarget.dataset.type,
          value: $event.currentTarget.innerText
        });
        $event.currentTarget.firstElementChild.removeAttribute("hidden");
      } else {
        $event.currentTarget.className = "clickFalse";
        $event.currentTarget.firstElementChild.setAttribute("hidden", "hidden");
        let index = -1;
        for (var i = 0; i < this.searchArray.length; i++) {
          if (
            this.searchArray[i].key === $event.currentTarget.dataset.type &&
            this.searchArray[i].value === $event.currentTarget.innerText
          ) {
            index = i
            break;
          }
        }
        this.searchArray.splice(index, 1);
      }
    },

样式

.clickFalse {
  border: 0px;
  border-radius: 5px;
  background: transparent;
  display: inline;
  margin-right: 20px;
  padding: 10px;
}
.clickFalse:hover,
.clickTrue:hover {
  cursor: pointer;
}
.clickTrue,
.clickFalse:visited {
  border-radius: 5px;
  display: inline;
  margin-right: 20px;
  padding: 10px;
  color: white;
  background: #337ab7;
  border: 0;
}