參考：https://www.jb51.net/article/147917.htm
思路
一、多選框勾選，出現對應的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事件里的方法
聽起來挺簡單，思路大概也明確，先講上述思路對應的代碼，后邊再講遇到的問題、坑
<el-row type="flex" justify="between">
<el-col :span="24">
<!--tag展示區-->
<el-row>
<el-tag class="tagClass" v-for="(tag,index) in tags" :key="index" closable @close="handleClose(tag)" :type="tag.id" size="mini">
{{tag.name}}
</el-tag>
<el-button v-if="tags.length>0" @click="clearAll" plain size="mini">全部刪除</el-button>
</el-row>
<!--表單-->
<el-form :model="tempForm" ref="tempForms" class="choose_tag">
<p class="tag_title">選擇標簽</p>
<!-- 多選人員 -->
<el-checkbox-group v-model="tempForm.checkboxGroup5" size="mini">
<el-checkbox border v-for="(item,index) in checkBox" @change="perChange(item)" :label="item.id" :key="index">{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form>
</el-col>
</el-row>
export default {
data() {
return {
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>
值得注意的點:
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的展示就會出問題；