前言
公司系統在用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的時候，會可能出問題(暫時先不討論這種情況)