标签：分享 attribute return style code 对象 文档 渲染 www.
前言
公司系统在用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项目里就能看到效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<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的时候，会可能出问题(暂时先不讨论这种情况)
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
标签：分享 attribute return style code 对象 文档 渲染 www.
原文地址：https://www.cnblogs.com/hudayang2008/p/9813336.html
