<el-col :span="12">
<div style="text-align: left" class="transferdata">
<div class="right-main">
<div class="right-left-main">
<span style="font-weight: 600;font-size: 16px;padding-left: 12px;padding-right: 12px">请选择分组</span>
<el-select v-model="addressGroupId" style="width: 120px;margin-top: 5px" size="medium" placeholder="请选择分组" @change="addressGroupIdSeleceChanged">
<el-option
v-for="item in addressGroup"
:key="item.groupId"
:label="item.groupName"
:value="item.groupId"/>
</el-select>
<div class="select-con">
<el-checkbox class="select-options" v-for="(item, index) of addressGList" :key="index" v-model="item.checked" @change="checkSelectAdd(item)">{{ item.name }}</el-checkbox>
</div>
</div>
<div style="float: left;width: 50px;height: 100%;text-align: center;margin-top: 180px">
<i class="el-icon-right" style="display: block"></i>
<i class="el-icon-right"></i>
</div>
<div class="right-right-main">
<!--<div v-for="(item, index) of addressListCheckList" :key="index" class="tab-item">-->
<!--<span class="name ellipsis">{{ item.name }}</span >-->
<!--<i class="el-icon-close" @click="deleteAddress(item)"></i>-->
<!--</div>-->
<div v-for="(item, index) of addressGrouplist" :key="index" class="tab-item">
<p v-if="item.itemlist.length>0">{{item.groupName}}</p>
<div style="box-sizing: border-box;padding-left: 20px" v-for="(items, index2) of item.itemlist" :key="index2+1000">
<span class="name ellipsis">{{ items.name }}</span >
<i class="el-icon-close" @click="deleteAddress(items)"></i>
</div> </div>
</div>
</div>
</div>
</el-col>
checkSelectAdd(item) {
if (item.checked == true) {
this.addressGrouplist.forEach(itemlist => {
if(itemlist.groupName == item.deptName) {
itemlist.itemlist.push(item)
}
})
} else {
this.deleteAddress(item)
} },
    addressGroupIdSeleceChanged(id) {
this.listdata = []
addressbookgroupalllist({
organizationId: 1,
deptId: id,
}).then(res => {
const result = res.data.data
for (const item of result) { if (this.hasId(item)) {
item.checked = true
} else {
item.checked = false
}
}
this.addressGList = result
})
},
 //删除
deleteAddress(item) {
//es5
// let temps = JSON.parse(JSON.stringify(this.addressGrouplist))
// temps.forEach(itemlists=> {
// if(itemlists.groupName == item.deptName) {
// itemlists.itemlist.forEach( (itemdatalist,index) => {
// if(itemdatalist.id == item.id) {
// itemlists.itemlist.splice(index,1)
// }
// })
// }
// })
// this.addressGrouplist = temps //es6
let temp = JSON.parse(JSON.stringify(this.addressGrouplist))
temp.forEach((itemdata)=> {
itemdata.itemlist = itemdata.itemlist.filter(itemList => {
return itemList.id !== item.id
})
})
this.addressGrouplist = temp for (const j of this.addressGList) {
if (j.id == item.id) {
j.checked = false
}
}
},

vue 分组左右选择的更多相关文章

  1. React 还是 Vue: 你应该选择哪一个Web前端框架?

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  2. 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)

    原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...

  3. voinc+vue实现级联选择

    需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title> < ...

  4. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  5. vue分组全选权限,CheckBoxGroup

    <template> <div class="comPower"> <div class="card_header" v-show ...

  6. vue自定义日期选择,类似美团日期选择,日历控件,vue日历区间选择

    一个日历的控件,基于vue的,可以日历区间选择,可用于酒店日历区间筛选,动手能力强,可以修改成小程序版本的,先上效果图 里面的颜色样式都是可以修改的 选择范围效果 话不多说,直接上干货,代码可以直接复 ...

  7. vue做商品选择如何保持样式

    是这样的情况:我知道,在vue里,实现点击高亮,可以使用诸如: <div class="static" v-bind:class="{defaultClass ,a ...

  8. 在Vue项目中 选择图片并预览

    最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...

  9. vue 构建版本 选择

    1.vue构建版本 vue构建版本分为:UMD.CommonJS和ES Module 三种. https://cn.vuejs.org/v2/guide/installation.html 区别: 所 ...

随机推荐

  1. C++ STL中常见容器的时间复杂度和比较和分析

    C++ STL中常见容器的时间复杂度 map, set, multimap, and multiset 上述四种容器采用红黑树实现,红黑树是平衡二叉树的一种.不同操作的时间复杂度近似为: 插入: O( ...

  2. Oracle的存储过程基本写法

    转: Oracle的存储过程基本写法 目录 1.1,Oracle存储过程简介: 1.2,创建存储过程的语法: 2.0,游标的使用.看到的一段解释很好的概念,如下: 回到顶部 1.1,Oracle存储过 ...

  3. 软件定义网络基础---SDN数据平面

    主要介绍SDN架构和转发模型 一:传统网络设备 (一)传统设备控制平面和数据平面 (二)数据平面的任务 数据平面对数据包的处理,主要通过查询由控制平面所生成的转发信息表来完成 (三)传统网络数据平面数 ...

  4. 转 zabbix 优化方法 以及数据库查询方法 两则

    ###########sample 1 https://www.cnblogs.com/hanshanxiaoheshang/p/10304672.html (不错) 如何从zabbix server ...

  5. Django中authenticate和login模块

    Django 提供内置的视图(view)函数用于处理登录和退出,Django提供两个函数来执行django.contrib.auth中的动作 : authenticate()和login(). 认证给 ...

  6. WinForm,在另一个线程中更新Form中的数据(转)

    Form本身有线程,但对于一些耗时的操作,我们不希望在Form的线程中进行,因为会导致Form线程阻塞,产生假死的现象. 其他线程中操作Form中的控件,总出现“线程间操作无效: 从不是创建控件的线程 ...

  7. Python - Django - 命名 URL 和反向解析 URL

    命名 URL: test.html: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. 海康威视实时预览回调PS流用EasyRTMP向RTMP服务器推流中视频数据处理的代码

    在上一篇方案<EasyRTMP结合海康HCNetSDK获取海康摄像机H.264实时流并转化成为RTMP直播推流(附源码)>我们介绍了将海康安防摄像机进行互联网直播的整体方案流程,其中有一个 ...

  9. Win10安装Golang

    首先去这个网站下载Golang的安装包:https://studygolang.com/dl 因为我的系统是Win10专业版64位,所以我选择了对应的Windows的安装包进行下载: 下载好安装包之后 ...

  10. Win10安装Oracle Database 18c (18.3)

    下载链接:https://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.html 我这里选择最新的 ...