详解Vue Elementui中的Tag与页面其它元素相互交互的两三事

前言

公司系统在用elementui做后台开发，不免遇到一些需要自己去根据原有的功能上，加一些交互的功能。
今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程，东西听上去很简单，但就是越简单的东西越容易出一些问题。官方tag文档：elementUi-tag标签

效果图：

思路

一、多选框勾选，出现对应的tag:

1.利用watch监听多选框绑定的值A(数组)的变化；
2.根据A的变化,循环拿到勾选多选框的id对应的name，将id以及对应的name组成新的对象数组；
3.将上一步得到的对象数组，去重(产品要求，出现的tag里不能有重复的)得到结果B；
4.将B赋值给tags，循环展示出来；

二、点击tag上的删除按钮，删除当前的tag，并将对应勾选的多选框取消勾选:

1.点击tag删除的按钮的时候，拿到当前tag的id C；
2.执行方法，去除掉A里的C；
3.watch事件重新进入到第一步的方法;

总结：监听多选框对应的model A，根据A的变化，取到对应的id与name，赋值给tag作展示，tag的删除事件反过来在去控制A的变化，重新进入watch事件里的方法

听起来挺简单，思路大概也明确，先讲上述思路对应的代码，后边再讲遇到的问题、坑

代码

复制整一块代码到你的elementUi项目里就能看到效果

<template>
 <div>
 <el-row type="flex" justify="bettwen">
  <el-col :span="15">
  <!-- 表单 -->
  <el-form :model="tempForm" ref="tempForms">
   <el-form-item label="请选择人员">
   <!-- 多选人员 -->
   <el-checkbox-group v-model="tempForm.checkboxGroup5" size="small">
    <el-checkbox border v-for="(item,index) in checkBox" @change="perChange(item)" :label="item.id" :key="index">{{item.name}}</el-checkbox>
   </el-checkbox-group>
   <!-- 多选人员 end-->
   </el-form-item>
  </el-form>
  <!-- 表单 end-->
  <!-- tag展示区 -->
  <el-row>
   <el-tag class="tagClass" v-for="(tag,index) in tags" :key="index" closable @close="handleClose(tag)" :type="tag.id">
   {{tag.name}}
   </el-tag>
   <el-button v-if="tags.length>0" @click="clearAll" plain>全部删除</el-button>
  </el-row>
  <!-- tag展示区 end-->
  </el-col>
 </el-row>
 </div>
</template>
<script>
export default {
 name: 'kk',
 mounted() {},
 data() {
 return {
  msg: 'Welcome to Your Vue.js App',
  tags: [],
  tempForm: {
  checkboxGroup5: [], //选择的人员								 
 1/3    1 2 3 下一页 尾页