vue 分组左右选择
程序员文章站
2022-11-06 18:37:02
<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 } } },