前言
公司系统在用 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 都重复的时候，才会被去重，拓展：可根据你设置的数组对象里的某个属性动态去重
// 数组对象去重：id、name，type 都重复的时候，才会被去重
delRepeat(arr) {
return Object.values(
arr.reduce((obj, next) => {
var key = JSON.stringify(next);
return (obj[key] = next), obj;
}, {}),
);
}
// 拓展：根据你设置的数组对象里的 name 属性动态去重
baseDel(arr) {
const res = new Map();
return arr.filter((item) => !res.has(item.name) && res.set(item.name, 1))
},
3. 我一开始是在多选框的 change 事件上来做 tag 的展示逻辑，因为 change 事件里可以同时拿到当前选择的 name 和 id，但是，change 的时候，你不知道这是在勾选还是在取消勾选，这样 tags 的展示就会出问题；
这个逻辑可能不太完美，因为有可能你的人员是从其他组件里选来的，所以当你删除 tag 的时候，会可能出问题(暂时先不讨论这种情况)
欢迎大家来指正和补充，或者你的业务需求以及解决方式，撒花