当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue 分组左右选择

vue 分组左右选择

2019年10月19日  | 移动技术网IT编程  | 我要评论

 

<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
                }
            }
        },

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网