前言

公司系统在用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的时候,会可能出问题(暂时先不讨论这种情况)

欢迎大家来指正和补充,或者你的业务需求以及解决方式,撒花

来源:https://segmentfault.com/a/1190000016500866

Vue:Elementui中的Tag与页面其它元素相互交互的两三事的更多相关文章

  1. Vue Elementui中的Tag与页面其它元素相互交互

    参考:https://www.jb51.net/article/147917.htm 思路 一.多选框勾选,出现对应的tag: 1.利用watch监听多选框绑定的值A(数组)的变化:2.根据A的变化, ...

  2. vue+element-ui中的图片获取与上传

    vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...

  3. vue element-ui中引入第三方icon

    vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...

  4. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  5. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

  6. vue+elementui 中 @keyup 键盘上下左右移动聚焦

    <template> <el-table :data="CreditUnclearOutlineList" border style="width: 1 ...

  7. vue+element-ui中引入阿里播放器

    1.在public文件下的index.html文件中插入以下代码: <link rel="stylesheet" href="https://g.alicdn.co ...

  8. 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...

  9. vue项目中利用popstate处理页面返回操作

    需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...

随机推荐

  1. Comet OJ - Contest #12 D

    题目描述 求(x,y)的对数满足x∈[0,a],y∈[0,b],x⊕y=0且|x-y|<=m 题解 一种比较sb的做法是考虑x-y的借位,根据借位以及差值进行转移 还有一种比较正常的做法,假设一 ...

  2. CSP-S2019游记&拆塔记

    不是拆广州塔 Day -inf 四套NOI模拟降智 Day0 拆了一发新新 本来想复习小圆脸结果拆了3h最后还没带任意门 没有帘子可还行 第一天由于没发现被子可以抽出来就没睡好 Day1 8:30开考 ...

  3. Mysql基本原理和概念

    一.引言 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天几十亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的问题.通 ...

  4. 监听ios自带返回功能

    //1.一开始用这段代码,结果发现滚动都失效了,如果页面大于屏幕高度将无法滚动至底部,所以淘汰 // document.addEventListener('touchmove', function(e ...

  5. 【canvas学习笔记八】像素操作

    ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息.它包含以下可读属性: width canvas的宽度,单位是像素. height canvas的高度,单位是像素 ...

  6. 微信小程序访问后台出现 对应的服务器证书无效。控制台输入 showRequestInfo() 可以获取更详细信息。

    检查微信开发者平台配置 https 服务端 nginx 配置 ssl 协议是否有效 在开发者工具中可以使用(详情 > 不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS ...

  7. 随堂小测APP使用体验

    随堂小测APP使用体验 先要去注册账号需要填写用户名.密码.手机号.学号/教师号.学校.专业.即可注册,注册成功后,即可登录APP进,登陆进去以后.会有两个界面,课堂和我的,注册.登录简单,通俗易懂, ...

  8. Android事件分发详解(六)——ACTION_DOWN的消费验证

    MainActivity如下: ? 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 3 ...

  9. Linux基本命令使用(一)

    1.head -n 文件    可以查看文件前n行 tail -n 文件        可以查看文件的后n行 tail -f  文件      可以实时查看文件,比如日志在更新,就可以实时显示最后几行 ...

  10. 测试常用shell语句——数值,数组类型;函数创建

    一.特殊类型的变量 shell下默认的变量类型为字符串类型 1,数值类型 如果进行数值运算,有这么几种方法 方法一: declare -i sum sum=+ echo $sum 方法二: sum=$ ...