详解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: [], //选择的人员
  },
  detaildata: [],
  checkbox: [{
   name: '小红',
   id: '101'
  },
  {
   name: '小黄',
   id: '100'

  }, {
   name: '小明',
   id: '102'

  }, {
   name: '小明',
   id: '102'

  }
  ],
  
 }
 },
 methods: {
 clearall() { //全部清空数据
  this.tags = []
  this.tempform.checkboxgroup5 = []
 },
 perchange(item) {
  this.detaildata.push(item)
 },
 handleclose(tag) { //标签的删除事件
  // 去掉当前删除的tag
  let yourchosetags = this.tempform.checkboxgroup5

  this.tempform.checkboxgroup5 = yourchosetags.filter(item => {
  if (tag.id !== item) {
   return true
  }
  })

  
 },
 delrepeat(arr) { //数组对象去重
  return object.values(
  arr.reduce((obj, next) => {
   var key = json.stringify(next);
   return (obj[key] = next), obj;
  }, {}),
  );
 },
 morearr() {
  let yourchose = this.tempform.checkboxgroup5
  let temptags = []

  temptags = this.basedatadetail(yourchose, this.checkbox, temptags)
  this.detaildata = temptags
 },
 basedatadetail(yourchose, basedata, callback) { //封装的数组方法
  let temp = callback
  // 循环两个数据拿到选择的checkbox的id对应的初始数据
  yourchose.foreach(item => {
  basedata.foreach(itemsecond => {
   if (item === itemsecond.id) {
   temp.push(itemsecond)
   }
  })
  })
  return temp
 },

 },
 watch: {
 detaildata() {
  let temparr = object.assign([], this.detaildata)
  temparr = this.delrepeat(temparr)
  // console.log(temparr)
  this.tags = temparr
 },
 "tempform.checkboxgroup5" () {
  this.morearr()
 },
 }
}

</script>
<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
.temparea {
 /*width: 100%;*/
}
.tagclass{
 margin-right: 10px;
}

</style>

值得注意的点:

1.我在多选框绑定值tempform.checkboxgroup5的监听事件里的方法的最后，得到了一个可能会有重复数据(重复id跟name)，再将这个含有重复数据数组对象赋值给另一个数组detaildata,在watch监听这个数组，去完重后，赋值给tags做展示。
为什么这样做，是因为，我们的需求里，除了在当前页面多选框选择人员，还有一个选择全公司员工的组件，这样不管从哪个渠道选择的人员都能最后将结果指向detaildata，保证渲染正确

2.数组对象去重，初始数据里可能会有重id、重名的对象(小明)，即便绑定多选框的model值里不会有重复的id，但在 利用id取对应name的时候，还是会检测出多条，这样tag就可能会显示重复的
所以利用这个方法,就能保证最后处理好的数据没有重复的，tag不会显示多个一样的，
但这个方法有点不灵活的地方就是，你要处理的数据({id:1,name:'小明',type:now})必须id、name，type都重复的时候，才会被去重，
拓展：可根据你设置的数组对象里的某个属性动态去重

3.我一开始是在多选框的change事件上来做tag的展示逻辑，因为change事件里可以同时拿到当前选择的name和id，但是，change的时候，你不知道这是在勾选还是在取消勾选，这样tags的展示就会出问题；

这个逻辑可能不太完美，因为有可能你的人员是从其他组件里选来的，所以当你删除tag的时候，会可能出问题(暂时先不讨论这种情况)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。