详细解释Vue Elementui中的Tag与页面上其他元素交互的两三件事

前言

公司系统正在用elementui做后台开发，但不可避免地会遇到一些基于原有功能的交互功能。今天，我将介绍在elementUi中使用Tag标签与多个框进行交互的过程。事情听起来很简单，但是越简单的事情，越容易制造一些问题。官方标签文档：elementUi-标签标签

渲染：

思路

I .选中多个框，将出现相应的标记：

1.使用watch监控由多个框绑定的值a(数组)的变化；2.根据a的变化，循环获取选中多框的id对应的名称，并以该id和对应的名称组成新的对象数组；3.复制上一步得到的对象数组(产品需求，标签中不能有重复)得到结果B；4.给标签分配B，循环显示；

其次，点击标签上的删除按钮删除当前标签，并在相应的复选框中取消选中：

1.当你点击标签删除按钮，得到id C；当前标签的；2.执行方法移除A中的C；3.重新进入3.watch事件第一步的方法；

总结：监控多选框对应的型号A，根据A的变化获取对应的id和名称，分配给标签显示。标签的删除事件反过来控制A的变化，重新进入观看事件

这听起来很简单，想法可能很清楚。先说说上述思路对应的代码，再说说后面遇到的问题和坑

密码

复制整一块代码到你的elementUi项目里就能看到效果模板div El-row type=' flex ' justice=' bett Wen ' El-col : span=' 15 '！-表单-El-form :型号=' TempFORm ' ref=' TempFORms ' El-form-项目标签='请选择人员！-多选人员-El-CheckBox-group v-model=' temp form。checkBox group 5 ' size=' small ' El-checkBox边框v-for='(项目，索引)在checkBox “@ change=”中，或者在checkBox(项目)“:标签=”项。id“: key=”索引“{ item。名称} }/El-CheckBox/El-CheckBox-group！-多选人员end - /el-form-item /el-form！-表单结束了。标签展示区-El-row El-tag class=' tag class ' v-for='(标记，索引)在标记' : key=' index ' closed @ close=' handleClose(标记)' : type='标记。id“{标记。name } }/El-tag El-button v-if=' tags。长度' 0 ' @ click=' clearAll '普通全部删除/el-button /el-row！标签展示区end-/El-col/El-row/div/templatescriptexport默认值{ name : ' kk '，mounted() {}，data() { return { msg: '欢迎使用您的Vue.js App '，标记：[]，tempform : {复选框组5:[]，//选择的人员}，detailData: []，checkBox: [{ name: '小红，id: '101' }，名称： '小黄，id: '100' }，名称： '小明，id: '102' }，名称： '小明，id: '102' } ]，} }，methods: { clearAll() { //全部清空数据这个。tags=[]this。模板。CheckBoxGrouP 5=[]}，PurGet(item){ this。Detail DATa。Push(item)}，handleClose(tag) { //标签的删除事件//去掉当前删除的标记让你的chosetags=这个。模板。复选框组5。模板。复选框组5=您的chosetags。过滤器(项目={ if(标记。身份证！==item) { return true } }) }，delRepeat(arr) { //数组对象去重返回对象。值(arr。reduce)((obj，next)={ var key=JSON。stringify(下一个)；返回下一个}, {}), );}，MoreArr(){ 0让你的选择=this.tempForm.checkboxGroup5让tempTags=[]tempTags=这个。baseDataDetail(你的选择，this.checkBox，tempTags)这个。detaildata=tempTags }，baseData detail(你的选择、baseData、回调){ //封装的数组方法让温度=回调//循环两个数据拿到选择的检验盒的编号对应的初始数据你的选择。foreach(item={ basedata。foreach(items second={ if(item===items second。id){ temp。推送(第二个项目)} })返回temp }，}，watch : { detailData(){让tempArr=object。赋值([]，这个。detailData)tempArr=this。delrepeat(TempArr)//控制台。记录(tempArr)这个。tags=tempArr }，' tempform。复选框组5 '({这。morar()}，}/}-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-仅样式作用域。temp area {/* width : 100%；*/}.标记类{ margin-right : 10px；}/样式值得注意的点：

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

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

3.一开始，我对多框的变更事件做了标签显示逻辑，因为在变更事件中可以同时获取当前选中的名称和id。但是更改的时候不知道是勾选还是不勾选，所以标签的显示会出错；

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

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