zoukankan      html  css  js  c++  java
  • vue 分组左右选择

    <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=" 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; 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
                    }
                }
            },
  • 相关阅读:
    ERROR Function not available to this responsibility.Change responsibilities or contact your System Administrator.
    After Upgrade To Release 12.1.3 Users Receive "Function Not Available To This Responsibility" Error While Selecting Sub Menus Under Diagnostics (Doc ID 1200743.1)
    产品设计中先熟练使用铅笔 不要依赖Axure
    12.1.2: How to Modify and Enable The Configurable Home Page Delivered Via 12.1.2 (Doc ID 1061482.1)
    Reverting back to the R12.1.1 and R12.1.3 Homepage Layout
    常见Linux版本
    网口扫盲二:Mac与Phy组成原理的简单分析
    VMware 8安装苹果操作系统Mac OS X 10.7 Lion正式版
    VMware8安装MacOS 10.8
    回顾苹果操作系统Mac OS的发展历史
  • 原文地址:https://www.cnblogs.com/Byme/p/11699533.html
Copyright © 2011-2022 走看看